Javascript 액세스 스타일 시트 구현 code_javascript 기술

스타일 시트에 대한 Javascript의 액세스를 기록해 보겠습니다.
Javascript는 웹 페이지에 있는 요소의 스타일 속성에 액세스할 수 있습니다. 예:

< ;/div>

js를 통해 스타일 속성에 액세스
alert(document.getElementById("main").style.BackgroundColor)

js를 통해 스타일 속성 변경
document.getElementById("main" ).style.BackgroundColor="blue";

위 코드는 우리에게 익숙하지만 일반적으로 요소의 모양 속성을 제어하기 위해 스타일 시트를 사용합니다.

<meta http-equiv="Content-Type" c> <title>JS가 CSS를 제어합니다</title> <style type="text/css"> #main { margin-left:200px; margin-top:70px; width:200px; height:100px; background-color<img src="/static/imghwm/default1.png" data-src="/editor/images/smilies/default/17.gif" class="lazy" / alt="Javascript 액세스 스타일 시트 구현 code_javascript 기술" >999999; border:1px solid #666666; } </style> <div id="main">쇼</div> <input type="button" value="获得样式"> <input type="button" value="写入样式"> <input type="button" value="获得最终样式">
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

이때, Alert(document.getElementById("main").style.BackgroundColor)

를 사용하면 null 값만 얻을 수 있으므로 js를 통해서만 스타일 시트에 액세스할 수 있습니다.
document.styleSheets 브라우저는 매우 다르며 스타일 시트에 액세스하는 개별 규칙도 다르기 때문에 스타일 시트 컬렉션을 얻을 수 있습니다. DOM은 각 스타일 시트에 대해 cssRules 컬렉션을 지정합니다. 표준은 정확하지만 불행하게도 IE에서는 이 컬렉션을 규칙으로 정의하여 다음 코드를 사용하여 올바른 개체를 얻을 수 있습니다.
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules ;

이 방법으로 다양한 브라우저의 CSS 컬렉션을 얻을 수 있습니다.
다음 JS 코드를 통해 스타일 시트를 가져옵니다.

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

function GetCSS()
{
var oCssRules=document.styleSheets[0].cssRules| |document.styleSheets[0].rules;
alert (oCssRules[0].style.BackgroundColor);
}

styleSheets[0]는 첫 번째 스타일 시트 참조인 oCssRules를 나타냅니다. [0]은 첫 번째 스타일 규칙(예: #main {})을 나타내며, 스타일 속성을 통해 특정 규칙에 액세스합니다.
마찬가지로 스타일시트 규칙 코드를 다음과 같이 변경합니다.

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

function SetCSS()
{
var oCssRules=document.styleSheets[0]. cssRules||document.styleSheets[0].rules;
oCssRules[0].style.BackgroundColor="red";
oCssRules[0].style.marginLeft="20px"
oCssRules[0 ].style.marginTop="20px";
}

단, 동일한 스타일 시트에 여러 요소가 연관될 수 있으므로 주의가 필요합니다.
요소의 스타일 객체와 CSS 규칙 외에도 각 요소에는 최종 스타일이 있습니다. 최종 스타일은 요소가 화면에 최종적으로 표시되는 방식을 알려주는 데 사용됩니다. 스타일과 CSS의 일치 계산 후 IE와 DOM은 이 스타일에 액세스하는 두 가지 방법이 있습니다. IE에서는 currentStyle 속성을 통해 DOM에서 getCompulatedStyle() 메서드를 사용합니다.
JS가 최종 스타일을 얻는 방법은 다음과 같습니다.

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

function GetFinalCSS()
{
var oDiv=document.getElementById("main");
//스타일 속성에 액세스
alert(oDiv.style .BackgroundColor)
//IE 메소드
alert(oDiv. currentStyle.BackgroundColor);
//DOM 메소드에서 두 번째 매개변수는 hover, first-leeter 등과 같은 의사 요소입니다.
//alert(document.defaultView.getComputeStyle(oDiv,null). backgroundColor);
}

저는 스타일 시트에 액세스하는 수고를 덜기 위해 currentStyle을 자주 사용합니다.
currentStyle은 읽기 전용 속성이므로 사용할 수 없습니다. 여러 스타일을 종합적으로 계산한 스타일 규칙이므로 이해하기 어렵지 않습니다.
getCompulatedStyle 메서드의 경우 document.defaultView 호출을 사용할 수 있습니다(IE 및 Safari에서는 이 메서드를 지원하지 않습니다). 따라서 getCompulatedStyle 메서드를 사용할 때는 여러 브라우저에서 테스트하는 것이 가장 좋습니다.