JavaScript_javascript 팁에서 CSS 속성에 액세스하는 여러 방법 소개
- WBOY원래의
- 2016-05-16 16:41:291463검색
일반적으로 JavaScript가 CSS 속성에 액세스하는 방법에는 "요소를 통한 액세스"와 "스타일 시트에 대한 직접 액세스"라는 두 가지 방법이 있습니다. 또한 스타일, 즉 런타임 스타일에 접근할 때 무시할 수 없는 문제가 있습니다.
1. 요소를 통해
에 액세스합니다.요소를 통해 스타일 시트에 접근하려면 먼저 어떤 요소인지 파악해야 합니다. 이것은 DOM의 내용이므로 여기서는 자세히 설명하지 않겠습니다. 참조를 얻은 후 "접근할 reference.style.attribute"를 통해 속성에 접근할 수 있습니다. 예를 들어, 다음 코드를 고려해보세요.
<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
#a의 배경색을 얻으려면 document.getElementById("a").style.backColor를 사용할 수 있습니다. 그러면 속성 값을 반환할지 변경할지 여부는 사용자에게 달려 있습니다. .
2. 스타일 시트에 직접 액세스
스타일 시트에 직접 접근한다는 것은 일반적으로 "먼저 해당 스타일 블록을 찾은 다음, 스타일 블록에서 해당 스타일 규칙을 찾고, 마지막으로 스타일 규칙에서 해당 스타일을 찾는 것"을 의미합니다.
먼저 스타일 블록에 대해 이야기해 보겠습니다. 코드에서 CSS 코드는 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 태그 사이에 있거나 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 또는 2cdf5bf648cf2f33323966d7f58a7f3f 코드에는 여러 개의 코드 블록이 위에서 아래로 배열되어 있을 수 있으며 스타일 블록은 배열 요소처럼 액세스할 수 있습니다. 예를 들어 첫 번째 스타일 블록에 액세스하려면 document.styleSheets[0]
그렇다면 스타일의 법칙은 무엇일까요? 먼저 다음 코드를 살펴보세요
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
background-color:red;
}
#b{
height:100px;
width:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
#a 스타일과 #b 스타일은 각각 코드에 지정되어 있습니다. #a 스타일 컬렉션 또는 #b 스타일 컬렉션이 스타일 규칙입니다. 이 스타일 블록에서 첫 번째 스타일 규칙은 #a에 대한 것이고 두 번째 스타일 규칙은 #b에 대한 것입니다. 배열 요소와 마찬가지로 스타일 규칙에 액세스할 수도 있습니다. 예를 들어, #b 스타일 규칙에 액세스하려면 document.styleSheets[0].cssRules[1]을 사용할 수 있습니다. 물론 다음과 같이 document.styleSheet[0].rules[1]을 작성할 수도 있습니다. 하지만 이런 방식의 글쓰기는 Firefox에서 지원되지 않습니다.
그러면 해당 스타일에 액세스할 수 있습니다. 예를 들어 #b의 배경색을 녹색으로 변경하려면 document.styleSheets[0].cssRules[1].style.BackgroundColor="green";
3. 런타임 스타일
다음 코드를 살펴보세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
color:red;
}
#b{
height:100px;
width:100px;
}
</style>
</head>
<body>
<div id="a">
<div id="b">观察字体颜色</div>
</div>
</body>
</html>
alert(document.getElementById("b").style.color);를 실행하면 팝업 창에 아무 것도 출력되지 않지만 페이지의 글꼴 색상이 빨간색으로 표시되는 이유는 무엇입니까? 이는 각 요소의 스타일 개체 속성이 즉시 업데이트되지 않기 때문입니다. 팝업창에 빨간색을 출력하고 싶다면 런타임 스타일을 사용해야 합니다. window.getCompulatedStyle(document.getElementById("b"),null).color 이렇게 하면 "red"에 액세스할 수 있습니다. 런타임 스타일에 액세스하는 또 다른 방법인 document.getElementById("b").currentStyle.color가 있지만 이 작성 방법은 IE에서만 지원됩니다.