JS는 CSS 스타일 시트_javascript 기술을 제어합니다.

먼저 JS에서 CSS를 제어하는 ​​방법을 기록해 보겠습니다.

1. javascript를 사용하여 CSS 클래스의 속성을 변경합니다.

표시 속성을 없음에서 인라인으로 변경하려고 합니다.
해결책: IE에서:

document.styleSheets[0].rules[0].style.display = "inline";
firefox에서:

document .styleSheets[ 0].cssRules[0].style.display = "inline";
토론: 특정 이름을 가진 스타일 개체를 검색하는 함수를 만들 수 있습니다.

function getstyle(sname) {
for (var i=0;ivar rule
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i ] .cssRules;
} else {
rules = document.styleSheets[i].rules
}
for (var j=0;j if (rules[j].selectorText == sname) {
//selectorText 속성은 선택한 주소를 대체하는 데 사용됩니다. RULES[J]의 CLASSNAME을 얻는다는 의미입니다. 틀렸다면 정정해 주세요.
return rule[j].style;
}
}
}
}
그러면 다음과 같습니다.

getstyle(".orig").display = "inline " ;
바로 그겁니다.
------ document.styleSheets[0].rules[0].style styleSheets[0] 배열의 아래 첨자는 페이지 번호 N을 나타냅니다. CSS 스타일 시트, 하위 규칙[0]의 배열 아래 첨자는 이 스타일 시트의 N번째 스타일을 나타냅니다. 예:

S 규칙 수정: document.styleSheets[0].rules[0] .style.display='inline ';
W 규칙 수정: document.styleSheets[0].rules[1].style.display = 'inline'
참고: CSS와 HTML을 결합하는 방식은 < ;LINK rel="stylesheet " type="text/css" href="" /> 또는 , 위의 방법은 가능하지만 @IMPORT는 가능하지 않습니다.
==== ===== ===========================
다음은 JS가 CSS의 스타일에 액세스하는 방법을 기록합니다.
javascript 사용 스타일 가져오기 및 설정
DOM 표준은 스타일 시트를 재정의하는 개념을 도입합니다. document.getElementById("id").style.BackgroundColor를 사용하여 스타일을 가져오면 id의 스타일 속성에 설정된 배경색만 가져옵니다. id 스타일 속성에 배경색이 설정되어 있지 않으면 빈 값을 반환합니다. 즉, id가 클래스 속성을 사용하여 외부 스타일 시트를 참조하고 배경색이 이 외부 스타일에 설정된 경우입니다. 죄송합니다. document.getElementById(" id").style.groundColor 이 작성 방법은 사용하기 쉽지 않습니다. 외부 스타일 시트의 설정을 가져오려면 getCompulatedStyle() 메소드를 사용해야 합니다. window 객체입니다. 다음과 같이 코드가 작성됩니다.
그런데 Firefox에서는 잘 작동하지만 IE에서는 그렇지 않습니다.
둘 사이의 호환 방식은 다음과 같습니다.
window.getCompulatedStyle?window.getCompulatedStyle(id,null).BackgroundColor: id.currentStyle["BackgroundColor"]로 작성됩니다.
배경색을 가져오는 경우 Firefox 및 IE에서 이 메소드의 반환 값입니다. IE는 "#ffff99"를 반환하고, Firefox는 " rgb(238, 44, 34) "를 반환합니다.
window.getCompulatedStyle(id,null)은 스타일을 설정할 수 없으며 스타일을 가져올 수만 있다는 점에 주목할 가치가 있습니다. . 이를 설정하려면 다음과 같이 작성해야 합니다. id.style.ground=" #EE2C21";
IE에서는 CURRENTSTYLE이 읽기 전용 모드에서만 스타일을 얻을 수 있습니다. 인터넷 검색자료에서 발췌한 것이며, 저작권 없이 원문과 같이 임의로 복제 가능합니다. 작가와 다른 생각이 있으시면 언제든지 연락주세요



JavaScript를 사용하여 CSS 속성 수정


기본 JavaScript만 작성하세요.
1. JS를 사용하여 라벨의 클래스 속성 값을 수정합니다.
클래스 속성은 라벨의 스타일 시트를 참조하는 방법 중 하나입니다. 스타일 시트가 변경된 경우 클래스 속성의 값이 변경되면 태그가 참조하는 스타일 시트도 변경되므로 첫 번째 수정 방법입니다.

태그의 클래스 속성을 변경하는 코드는 다음과 같습니다.

document.getElementById( id ).className = string
document.getElementById( id )는 DOM을 가져오는 데 사용됩니다. Object 태그에 해당하는 경우 다른 방법을 사용하여 얻을 수도 있습니다. className은 레이블의 클래스 속성에 해당하는 DOM 객체의 속성입니다. 문자열은 정의된 CSS 선택기여야 하는 클래스 속성의 새 값입니다.

이 방법을 사용하면 태그의 CSS 스타일시트를 다른 스타일시트로 교체하거나, CSS 스타일이 적용되지 않은 태그에 지정된 스타일을 적용할 수 있습니다.

예:





코드 복사

코드는 다음과 같습니다.