JavaScript 액세스 스타일 시트 code_javascript 팁

예를 들어 아이콘 위로 마우스를 이동하면 아이콘에 몇 가지 애니메이션 효과(그라데이션 확대, 깜박임, 색상 변경 등)가 나타나고 이러한 모든 친숙한 효과는 기본적으로 스타일과 관련되어 있으므로 한 기사에서 나는 JavaScript가 스타일에서 어떻게 작동하는지 배웠습니다.

핵심 기술 포인트: 스타일. 이 기사에서는 CSS 스타일에 대한 어느 정도의 이해가 필요합니다. (독자들은 CSS 관련 내용을 구글링할 수 있습니다.)

작업 단계:

1. 페이지 코드(JS 코드 포함)는 다음과 같습니다.

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

="text/javascript" >
function getBackGroundColor() {
var oDiv = document.getElementById("div1")
alert(oDiv.style.BackgroundColor)

div는 JS 코드 객체에서 얻어지고 div 객체의 배경색을 출력합니다. 모든 것이 너무 완벽해 보이지만 효과는 항상 다음과 같이 우리를 실망시킵니다.

JavaScript가 CSS 스타일에 액세스하는 것 같습니다. 이런 방식으로는 효과를 얻을 수 없습니다. 이유: CSS 데이터는 스타일 속성에 저장되지 않고 클래스에 저장됩니다. 그럼 다음으로 해야 할 일은 CSS 클래스에 어떻게 접근하는가입니다.


2. 다행히 document.styleSheets 컬렉션을 찾았습니다. document.styleSheets에는 html 페이지의 모든 스타일 시트와 모든