JavaScript CSS 수정 학습 3장 스타일 시트 수정_기본 지식

코드와 기존 DHTML의 차이점에 유의하세요. DHTML에서는 페이지의 특정 요소를 직접 수정하여 스타일을 변경하지만 여기의 코드는 스타일 시트를 수정합니다.
W3C DOM-CSS 호환성 목록은 여기에서 확인하세요.
정의
페이지에는 항상 하나 이상의 스타일 시트가 포함됩니다. 스타일 시트에는 하나 이상의 규칙이 포함되며, 규칙에는 자세한 스타일 설명이 포함됩니다. 이 페이지의 스타일시트는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

우리의 목적은 pre의 흰색 배경을 수정하는 것입니다. #EEF0F5로 테스트하세요.
스타일 시트
모든 외부 또는 내장 스타일 시트는 document.styleSheets 배열을 통해 액세스할 수 있습니다. quirksmode.css, 이 웹사이트의 일반적인 스타일 시트는 document.styleSheets[0]에 저장됩니다. 위의 특수 스타일 시트 섹션은 document.styleSheets[1]에 저장됩니다. 이 코드에서 테스트해 보겠습니다.
cssRules[] 및 규칙[]
규칙은 하나 이상의 요소에 대한 선언 집합입니다. 규칙에 액세스하는 방법에는 두 가지가 있습니다. W3C는 cssRules[] 사용을 주장하는 반면 Microsoft는 규칙[] 사용을 주장합니다. 두 방법 모두 인덱스 번호를 사용합니다. 첫 번째 규칙은 (css)Rules[0]이고 두 번째 규칙은 (css)Rules[1]입니다.

코드 복사 코드는 다음과 같습니다.

var theRules = new Array()
if (document.styleSheets[1].cssRules)
theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[ 1].rules

TheRules에는 이제 모든 스타일 규칙이 포함됩니다. 규칙 수
스타일 시트는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

@ import url("test.css");
p,h2,h3 {
padding-right: 10px;
}
pre.test * {
margin- right: 20%;
}
pre.test {
background-color: #ffffff
}

귀하의 의견으로는 @import; 그런 다음 p, h2, h3, pre.test *, 마지막으로 pre.test입니다. 그러나 브라우저에서는 이를 그렇게 보지 않습니다.
Safari는 4가지 규칙을 봅니다:
0, 정의되지 않음
1, P
2, PRE.test[CLASSS~="test"] *
3, PRE.test[CLASSS ~=" test"]
대문자 주의
IE7beta3에서는 5개 항목을 확인했습니다:
0, P
1, H2
2, H3
3, PRE.test *
4. PRE .test
대문자 사용에 유의하세요
Mac IE에서도 5개의 항목이 확인되었습니다:
0, P
1, H2
2, H3
3, PRE.test *(참고: 없음 아니요.)
4. PRE.test
대문자 사용에 유의하세요
Mozilla 및 Opera 9에서는
0, 정의되지 않음
1, p,h2,h3
2. .test *
3. pre.test
소문자에 주의하세요
대혼란!
1. IE는 p, h2, h3이 하나가 아닌 세 가지 규칙이라고 생각하는 반면 Safari는 p만 취합니다. 이제서야 나는 이것이 잘못된 글쓰기 방식이라는 것을 깨달았습니다.
2. Mac IE에서는 선택기를 pre.test *로 변경했기 때문에 의미가 매우 다릅니다. 매우 심각한 문제입니다.
3. 사전 테스트에 불필요한 표현을 추가하는 사파리를 제외하면 이 버전이 가장 잘 지원됩니다.
pre.test에 액세스하려면 Safari 및 Mozilla에서는 cssRules[3]가 필요하고 IE는 rule[4]이며 초기 Mozilla는 cssRules[5]입니다. 정말 귀엽지 않나요?
키워드가 없습니다
그래서 인덱스 값을 사용하면 문제가 매우 심각해집니다. pre의 스타일 시트 규칙에 액세스할 수 있도록
document.styleSheets[1].cssRules['PRE.test']와 같이 액세스할 수 있기를 바랍니다. 그러나 W3C나 다른 브라우저에서는 스타일 시트에 액세스하는 이러한 방법이 필요하지 않은 것 같습니다. 그러나 모든 문서는 이 문제에 대해 침묵하고 있습니다.
이러한 실패는 기본적으로 규칙에 액세스할 수 없음을 의미합니다.
스타일 선언
규칙에 액세스할 수 있다고 가정합니다. 이제 명령문 중 하나를 변경해야 합니다. 표현식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

rule.style.color = '#0000cc'

W3C 방식은

코드 복사 코드는

rule.style입니다. setProperty(' color','#00cc00',null);

style.color가 훨씬 간단하기 때문에 이 seProperty()를 사용하고 싶지 않습니다.
예제
pre의 색상을 변경하려고 합니다. 코드는 다음과 같습니다.
사용할 수 있도록 마지막에 pre 규칙을 작성했습니다. 보기 흉하지만 이 방법밖에 없습니다:

코드 복사 코드는 다음과 같습니다.

functionchangeIt() {
if (!document.styleSheets) return;
var theRules = new Array()
if (document.styleSheets[1].cssRules)
theRules = document. styleSheets[1 ].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules
else
theRules[theRules.length-1 ].style .groundColor = '#EEF0F5';
}

번역 주소: http://www.quirksmode.org/dom/changess.html
다음 정보를 지켜주세요. 재인쇄용
저자: Beiyu(tw:@rehawk)