JavaScript로 CSS 선언을 동적으로 수정하는 방법은 무엇입니까?

JavaScript를 사용하여 CSS 선언 액세스 및 수정

인라인 스타일을 사용하지 않고 CSS 선언을 동적으로 수정하려면 CSS 규칙 집합 객체에 액세스하세요. DOM 스타일시트에서.

CSS 선언 수정 방법

1. 스타일시트 개체 가져오기:

   <code class="javascript">var sheet = document.styleSheets[0];</code>

2. CSS 규칙 검색:

   <code class="javascript">var rules = sheet.cssRules || sheet.rules;</code>

3. 색인을 사용하여 원하는 규칙 선택:

   <code class="javascript">var rule = rules[0];</code>

4. 규칙 수정 스타일:

   <code class="javascript">rule.style.color = 'red';</code>

예

다음 예를 고려하세요.

<code class="html"><style>
    .box {color: green;}
    .box:hover {color: blue;}
</style>

<div class="box">TEXT</div></code>

텍스트 색상을 변경하려면 .box를 빨간색으로 변경하고 마우스 오버 동작에 영향을 주지 않습니다.

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.color = 'red';</code>

Internet Explorer용 참고 사항

Internet Explorer는 CSS 규칙에 액세스하기 위해 cssRules 대신 규칙을 사용합니다.

데모

JavaScript를 사용하여 CSS 선언에 액세스하고 수정하는 라이브 데모는 http://jsfiddle.net/8Mnsf/1/

에서 확인할 수 있습니다.

위 내용은 JavaScript로 CSS 선언을 동적으로 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!