>웹 프론트엔드 >JS 튜토리얼 >style_javascript 기술을 얻고 설정하기 위해 javascript getCompulatedStyle을 사용하는 원리

style_javascript 기술을 얻고 설정하기 위해 javascript getCompulatedStyle을 사용하는 원리

WBOY
WBOY원래의
2016-05-16 18:59:58997검색

관심 있는 친구들은 '바이두 팝업'만 검색하면 됩니다. 이미 누군가 댓글을 달았는데, 정말 강력하네요.
가장 흥미로운 점은 자바스크립트를 사용하여 스타일을 가져오고 설정하는 것입니다.

DOM 표준에서는 document.getElementById("id").style.BackgroundColor를 사용하여 스타일 시트를 재정의하는 개념을 도입합니다. 스타일, 우리가 얻는 것은 id의 스타일 속성에 설정된 배경색입니다. 배경색이 id의 스타일 속성에 설정되지 않은 경우, 즉, id가 클래스를 사용하는 경우에는 빈 값을 반환합니다. 외부 스타일 시트를 참조하려면 이 외부 스타일 시트에서 설정하세요. 죄송합니다. document.getElementById("id").style.BackgroundColor에서 설정을 가져오려면 사용하기가 쉽지 않습니다. 외부 스타일 시트를 사용하려면 window 개체의 getCompulatedStyle() 메서드를 사용해야 합니다. 코드는 다음과 같이 작성됩니다. window.getCompulatedStyle(id,null).BackgroundColor
그런데 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.Background="#EE2C21";

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.