향후 문의를 용이하게하기 위해 몇 가지 정보를 읽고 다음 방법을 요약했습니다. 기본 J로만 제한됩니다. 잘못된 장소가 있으면 지적하십시오! 나는 단지 그것을 읽은 후에 모두가 괜찮을 것이기를 바랍니다!
1. DOM 노드 객체 (즉, CSSStyledEclaration 객체)의 스타일 객체를 통해 CSS 스타일의 문서 요소를 읽고 쓸 수 있습니다.
예를 들어 : var elm = document.getElementById ( 'test');
elm.style.color = 'black';
2. getAttribute (), setattribute () 및 removeattribute ()를 통해 스타일 속성을 직접 읽고 쓰고 요소 개체
예 : Elm.setAttribute ( 'style', 'color : red; line-height : 30px');
3. CSSStyledEclaration 객체의 CSSTEXT 속성을 통해 SetProperty (), removeProperty 및 기타 방법
좋다:
elm.style.csstext = '색상 : 빨간색; 선 하이트 : 30px'; elm.style.removeproperty ( 'color'); elm.style.setproperty ( 'color', 'green', 'meigative'); elm.style.csstext = ''; //이 규칙의 모든 선언을 신속하게 지우십시오
각 CSS 규칙의 스타일 선언 부분 (브레이스 내부의 부품)은 CSSStyledEclaration 객체, 특성 및 방법입니다.
재산:
1.CSSTEXT : 현재 규칙의 모든 스타일 선언 텍스트. 이 속성은 읽고 작성할 수 있으며 현재 규칙을 설정하는 데 사용할 수 있습니다.
2. 길이 : 현재 규칙에는 몇 개의 선언이 포함되어 있습니까?
3. Parentrule : 현재 규칙을 포함하는 규칙, 동일한 CSSRULE 인터페이스의 ParentRule 속성.
방법:
1. getPropertyPriority () 메소드는 지정된 우선 순위를 반환합니다. 있으면 "중요", 그렇지 않으면 빈 문자열입니다.
2. getPropertyValue 메소드는 지정된 선언 된 값을 반환합니다.
3. 항목 (index) 메소드는 지정된 위치의 속성 이름을 반환하고 일반적으로 [index] 구문을 사용하여 더 직접적입니다.
4. removeProperty 방법은 CSS 속성을 삭제하고 삭제 된 값을 반환하는 데 사용됩니다.
5. SetProperty 메소드는 지정된 CSS 속성을 설정하는 데 사용되며 리턴 값은 없습니다.
4. document.stylesheets 속성을 사용하여 현재 페이지의 모든 스타일 시트 객체 (즉, 모든 스타일 시트)를 반환하십시오. 읽기 전용 클래스 배열 객체이며 해당 요소는 CSSSTYLESHEET 객체 (스타일 시트 객체에서 상속)입니다. 이 개체의 속성 방법은 다음과 같습니다.
재산:
1. CSSRULES 클래스 어레이 객체, 요소는 스타일 시트의 CSSSTYLERULE 객체입니다. IE9는 다음과 같은 규칙입니다.
2. 비활성화 된 속성은 true 또는 비활성화 된 값의 스타일 시트를 열거 나 닫는 데 사용됩니다.
3. wornernode 속성은 스타일 시트 객체가있는 DOM 노드를 반환합니다. 다른 스타일 시트가 참조한 스타일 시트의 경우이 속성은 널입니다.
4. CSS의 @Import 명령은 스타일 시트에 다른 스타일 시트를로드 할 수 있도록하기 때문에 ParentStylEesheet 속성에는 ParentStylesheet 속성이 있으며 현재 스타일 시트를 포함하는 스타일 시트를 반환합니다. 현재 스타일 시트가 최상위 스타일 스타일 시트 인 경우 속성은 NULL을 반환합니다.
5. 유형 속성은 스타일 시트 객체의 유형 값, 일반적으로 텍스트/CSS를 반환합니다.
6. 제목 속성은 스타일 시트 객체의 제목 값을 반환합니다.
7. HREF 속성은 읽기 전용 속성으로 스타일 시트 객체 연결의 스타일 시트 주소를 반환합니다. 임베디드 스타일 노드의 경우이 속성은 NULL과 같습니다.
8. 미디어 속성은이 스타일 시트가 화면, 인쇄 또는 둘 다에 적용되는지 여부를 나타냅니다 (모두). 이 속성은 읽기 전용이며 기본값은 화면입니다.
방법 : deleterule () 스타일 시트에서 규칙을 삭제하고, insertrule ()은 새 규칙을 스타일 시트에 삽입하고 ie9는 addlule () 및 removerule ();
좋다:
document.stylesheets [0] .insertrule ( '#test : hover {color : white;}', 0); document.stylesheets [0] .Deleterule (0); // 스타일 시트 문서에서 첫 번째 규칙을 삭제합니다 .Stylesheets [0] .cssrules [1] .selectortext; // 선택기 문자열 문자를 반환하십시오 .Stylesheets [0] .CSSRULES [1] .CSSTEXT; // 선택기 문서를 포함하여 규칙 문자열을 반환합니다. // 현재 규칙에 대한 모든 스타일 선언 문자열을 반환합니다5. 창 객체의 getComputedStyle 메소드를 사용하십시오. 첫 번째 매개 변수는 요소 객체이고 두 번째 매개 변수는 null, 빈 문자열 또는 의사 요소 문자열 일 수 있습니다. 이 메소드는 계산 스타일을 나타내는 읽기 전용 csstyledeclaration 객체를 반환합니다. 실제로 지정된 요소에 실제로 적용되는 최종 스타일 정보, 즉 다양한 CSS 규칙의 중첩 후 결과를 나타냅니다.
예를 들면 : var color = wind
var color = wind
또는 : var color = window.getComputedStyle (elm, null) .color;
계산 된 스타일을 나타내는 cssstyledeclaration 객체와 인라인 스타일을 나타내는 cssstyledeclaration 객체의 차이점 :
1. 계산 스타일의 속성은 읽기 전용입니다.
2. 스타일의 값을 계산하는 것은 절대 값입니다. 백분율 및 포인트와 같은 상대 단위는 모두 문자열 절대 값으로 변환됩니다. 값이 색상 인 속성은 "rgb (#,#,#)"또는 "rgba (#,#,#,#)"형식으로 반환됩니다.
3. 화합물 속성을 계산하지는 않지만 마진을 쿼리하지 않고 Margintop 단독 쿼리 등과 같은 가장 기본적인 속성을 기반으로합니다.
4. CSSTEXT 속성은 스타일 객체에 정의되지 않습니다.
5. 계산 스타일도 기만적입니다. 그것을 사용할 때는 특정 속성을 쿼리 할 때 리턴 값에주의를 기울여야합니다. 예를 들어, 글꼴 패밀리 쿼리;
6. getComputedStyle 메소드는 IE9 아래에 지원되지 않습니다. IE의 요소 객체에는 현재 스타일 속성이 있습니다.
6. 스타일 시트를 직접 추가하십시오
1. 내장 스타일 시트를 추가하려면 태그 <style>을 만듭니다.
var style1 = document.createElement ( 'style'); style1.innerhtml = 'body {color : red} #top : hover {back Document.head.appendChild (Style1);2. 또 다른 방법은 외부 스타일 시트를 추가하는 것입니다. 즉, 문서에 링크 노드를 추가하고 외부 스타일 시트의 URL에 HREF 속성을 가리 킵니다
var link1 = document.createElement ( 'link'); link1.setattribute ( 'rel', 'stylesheet'); link1.setattribute ( 'type', 'text/css'); link1.setattribute ( 'href', 'reset-min.css'); document.head.appendchild (link1);
7. Window.matchmedia 메소드는 CSS의 MediaQuery 문을 확인하는 데 사용됩니다. 다양한 브라우저 (IE 10+ 포함)의 최신 버전은이 방법을 지원합니다. 이 방법을 지원하지 않는 이전 브라우저의 경우 타사 기능 라이브러리 Matchmedia.js를 사용할 수 있습니다.
다음은 MediaQuery 진술의 예입니다.
@Media all and (max-device-width : 700px) {body {background : #ff0;}}Window.matchMedia 메서드는 MediaQuery 문자열을 매개 변수로 받아들이고 MediaQueryList 객체를 반환합니다. 이 객체에는 다음 두 가지 속성이 있습니다.
미디어 : Query MediaQuery String을 반환합니다.
일치 : 현재 환경이 쿼리 문과 일치하는지 여부를 나타내는 부울 값을 반환합니다.
var result = window.matchmedia ( '(max-width : 700px)'); if (result.matches) {console.log ( '페이지 너비는 700px보다 작거나 같음'); } else {console.log ( '페이지 너비는 700px보다 큽니다'); }mediaqueryList 객체는 창으로 반환됩니다 .MatchMedia 메소드에는 이벤트를 듣는 두 가지 방법의 두 가지 방법이 있습니다 : AddListener 메소드와 Removelistener 메소드. MediaQuery Query 결과가 변경되면 지정된 콜백 함수가 호출됩니다.
var mql = window.matchmedia ( "(max-width : 700px)"); mql.addlistener (mqcallback); // 콜백 함수 mqcallback (mqcallback); // 콜백 함수 함수 함수 mqcallback (mql) {if (mql.matches) {// 700 pixels} else {// 700 pixels}}이 기사에 대한 참조 :
MDN : https://developer.mozilla.org/zh-cn/docs/web/api
Ruan Yifeng JavaScript 참조 : http://javaScript.ruanyifeng.com/dom/css.html
권위있는 JavaScript 가이드 Sixth Edition
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.