자바스크립트 컨트롤 CSS 스타일에 대한 모든 스타일 코드 예제 요약

JS에서 CSS를 제어하는 ​​방법을 기록합니다.

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

<style type="text/css"> 
.orig { 
display: none; 
} 
</style>

표시 속성을 없음에서 인라인으로 변경하려고 합니다.
해결책: 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;i<document.styleSheets.length;i++) { 
var rules; 
if (document.styleSheets[i].cssRules) { 
rules = document.styleSheets[i].cssRules; 
} else { 
rules = document.styleSheets[i].rules; 
} 
for (var j=0;j<rules.length;j++) { 
if (rules[j].selectorText == sname) { 
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正 
return rules[j].style; 
} 
} 
} 
}

그런 다음 다음과 같이 하세요:

getstyle(".orig").display = "inline";

.
------------------- document.styleSheets[0].rules[0].style 이 styleSheets[0] 배열의 아래 첨자는 이 페이지 CSS의 N번째를 나타냅니다. 스타일 시트에서 하위 규칙[0]의 배열 첨자는 이 스타일 시트의 N번째 스타일을 나타냅니다. 예:

<style type="text/css"> 
.s{display="none";} 
.w{display="none";} 
</style>

수정 규칙 S: document.styleSheets[0].rules[0] .style.display=' inline';
규칙 수정 W: document.styleSheets[0].rules[1].style.display = 'inline';
참고: CSS와 HTML을 결합하는 방식은 0abd3d6c0d243180604332b7458be82b 또는 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 위의 방법은 가능하지만 @IMPORT는 가능하지 않습니다.

다음은 CSS 스타일에 대한 JS 액세스를 기록합니다. 스타일을 가져오고 설정하는 javascript
DOM 표준에는 스타일 시트를 재정의하는 개념이 도입되었습니다. document.getElementById("id").style.BackgroundColor를 사용하여 스타일을 가져오면 스타일 속성에 설정된 배경색만 가져옵니다. id의 style 속성에 background-color가 설정되어 있지 않으면 빈 값을 반환합니다. 즉, id가 외부 스타일 시트를 참조하기 위해 class 속성을 사용하고 배경색이 설정된 경우입니다. 이 외부 스타일 시트에서는 죄송합니다. getElementById("id").style.backColor 이 작성 방법은 사용하기 쉽지 않습니다. 외부 스타일 시트에서 설정을 가져오려면 getCompulatedStyle( ) 코드는 이렇게 작성합니다

window.getComputedStyle(id,null).backgroundColor

그런데 호환성 문제가 또 발생합니다. 이렇게 작성하면 Firefox에서는 잘 작동하지만 IE에서는 호환되지 않는 방법을 사용하면

window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];

로 작성됩니다. 배경색을 얻으려면 Firefox와 IE에서 이 메서드의 반환 값이 여전히 다릅니다. Firefox에서는 "#ffff99"를 반환하지만 Firefox에서는 "rgb(238, 44, 34) "를 반환합니다.

가치가 있습니다. window.getCompulatedStyle(id,null)은 스타일을 설정할 수 없으며 스타일을 가져올 수만 있습니다. 설정은 다음과 같이 작성해야 합니다. id.style.Background="#EE2C21";

IE에서 CURRENTSTYLE은 스타일만 가져올 수 있습니다. 읽기 전용 모드.

위 내용은 자바스크립트 컨트롤 CSS 스타일에 대한 모든 스타일 코드 예제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!