JavaScript에서 CSS 속성에 액세스하는 몇 가지 방법 소개

2894 단어
JavaScript에서 CSS 속성에 액세스하는 방법은 전체적으로 두 가지가 있는데 그것이 바로'요소를 통해 액세스','스타일시트에 직접 액세스'입니다.또한 스타일에 접근할 때 무시할 수 없는 문제가 있습니다. 실행 스타일입니다.
1. 요소를 통해 액세스
원소를 통해 스타일시트에 접근하려면 어느 원소인지 확인해야 한다.이것은 DOM의 내용으로, 여기서 더 이상 말하지 않겠다.인용을 가져오면 '인용.style. 접근할 속성' 을 통해 특정한 속성에 접근할 수 있습니다.예를 들면 다음과 같은 코드를 보십시오.

 
 
 
 
 
 
 

#a의 배경색을 가져오려고 할 때document을 사용할 수 있습니다.getElementById("a").style.backgroundColor;이렇게 하면 방문이 완료됩니다. 다음에 속성 값을 되돌려받든지 변경하든지 마음대로 하세요.
2. 스타일시트에 직접 액세스
스타일시트에 직접 접근하는 것은 전반적으로'먼저 해당하는 스타일 블록을 찾은 다음에 이 스타일 블록에서 상응하는 스타일 규칙을 찾고 마지막에 이 스타일 규칙에서 상응하는 스타일을 찾는다'는 것이다.
스타일 블록부터 말해봐.코드에서 CSS 코드는 탭 사이 또는 에 존재하며

#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.


 
 
 
 
 
 
 


alert(document.getElementById("b")를 실행할 때style.color);이때 탄창에 아무것도 출력되지 않았는데 페이지의 글씨체 색깔이 분명히 빨간색인데 왜요?이것은 모든 요소의 스타일 대상 속성이 즉시 업데이트되지 않기 때문이다.우리가 창에 빨간색을 출력하려고 할 때는 실행 시 스타일을 사용해야 한다.window.getComputedStyle(document.getElementById("b"),null).color 이렇게 하면 빨간색에 접근할 수 있습니다.액세스 실행 시 스타일에도 다른 쓰기 방법이 있습니다.getElementById("b").currentStyle.color 그러나 이 쓰기 방법은 IE만 지원합니다.







좋은 웹페이지 즐겨찾기