JavaScript가 CSS 속성에 액세스하는 두 가지 방법은 "요소를 통한 액세스"및 "스타일 시트에서 직접 액세스"하는 두 가지 방법이 있습니다. 또한 스타일 - 런타임 스타일에 액세스 할 때 무시할 수없는 문제가 있습니다.
1. 요소를 통한 액세스
요소를 통해 스타일 시트에 액세스하려면 먼저 어떤 요소가 있는지 결정해야합니다. 이것은 DOM의 내용이므로 여기에 대해 더 말하지 않을 것입니다. 참조를 얻은 후 "reference.style. access to access"를 통해 특정 속성에 액세스 할 수 있습니다. 예를 들어 다음 코드를 참조하십시오.
<pre name = "code"> <pre name = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {높이 : 100px; 너비 : 100px; 배경색 : 빨간색; } </style> </head> <hod> <div id = "a"> </div> </body> </html>#A의 배경색을 얻으려면 문서화 할 수 있습니다 .getElementById ( "A"). Style.backgroundColor; 이런 식으로 액세스가 완료됩니다. 그 후 속성 값을 반환하거나 변경하든, 그것은 당신에게 달려 있습니다.
2 스타일 시트에 직접 액세스하십시오
일반적으로 스타일 시트에 직접 액세스하는 것은 "먼저 해당 스타일 블록을 찾은 다음 스타일 블록에서 해당 스타일 규칙을 찾은 다음 최종적으로 스타일 규칙에서 해당 스타일을 찾습니다"입니다.
어떤 스타일 블록이 무엇인지 이야기합시다. 코드에서 CSS 코드는 <스타일> </style> 태그 또는 <link> 사이에 존재하며 <style> </style> 또는 <link>는 스타일 블록입니다. 코드에서 여러 코드 블록이 위에서 아래로 순서대로 배열 될 수 있으며 배열 요소에 액세스하는 것과 같은 스타일 블록에 액세스 할 수 있습니다. 예를 들어 스타일 블록에서 첫 번째에 액세스하려면 문서화 할 수 있습니다 .Stylesheets [0]
그런 다음 스타일 규칙을 말하십시오. 먼저 다음 코드를보십시오
<pre name = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {height : 100px; 너비 : 100px; 배경색 : 빨간색; } #B {높이 : 100px; 너비 : 100px; 배경색 : 파란색; } </style> </head> <body> <div id = "a"> </div> <div id = "b"> </div> </body> </html>이 코드는 각각 #A 및 #B의 스타일을 지정합니다. #A 스타일 또는 #B 컬렉션 모음은 스타일 규칙입니다. 이 스타일 블록에서 #A의 첫 번째 스타일 규칙과 #B의 두 번째 스타일 규칙입니다. 배열 요소에 액세스 할 수있는 스타일 규칙에도 액세스 할 수 있습니다. 예를 들어, #B 스타일 규칙에 액세스하려면 문서화 할 수 있습니다 .Stylesheets [0] .CSSRULES [1] 물론 문서를 작성하도록 선택할 수 있습니다.
그런 다음 해당 스타일에 액세스 할 수 있습니다. 예를 들어, #B의 배경색을 녹색으로 변경하려면 문서화 할 수 있습니다 .Stylesheets [0] .CSSRULES [1] .style.backgroundColor = "Green";
3. 런타임 스타일
다음 코드를보십시오.
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {높이 : 100px; 너비 : 100px; 색상 : 빨간색; } #B {높이 : 100px; 너비 : 100px; .ALERT를 실행하면 (Document.GetElementById ( "B"). Style.Color); 왜? 각 요소의 스타일 객체 속성이 즉시 업데이트되지 않기 때문입니다. 팝업 창에서 빨간색을 출력하려면 런타임 스타일을 사용해야합니다. window.getComputedStyle (document.getElementById ( "b"), null) .Color가 "빨간색"에 액세스 할 수 있도록합니다. 런타임 스타일 문서에 액세스하는 또 다른 방법이 있습니다 .getElementById ( "B"). currentStyle.Color이지만이 방법은 IE에 의해서만 지원됩니다.