## 인라인 스타일 지정 없이 JavaScript로 CSS 규칙을 수정하는 방법은 무엇입니까?

인라인 스타일 지정 없이 JavaScript를 사용하여 CSS 규칙 수정

인라인 스타일을 사용하지 않고 CSS 선언을 동적으로 수정해야 하는 경우가 있습니다. 다음 예를 고려해 보세요.

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

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

이렇게 하면 파란색 상자가 생성되고 마우스를 올리면 녹색으로 변합니다. 그러나 인라인 스타일은 이 동작을 재정의할 수 있습니다.

<code class="html"><div class="box" style="color:red;">TEXT</box></code>

이 경우 상자는 마우스 오버 상태에 관계없이 항상 빨간색입니다.

이 문제를 방지하려면 CSS 선언 개체를 직접 사용합니다. 방법은 다음과 같습니다.

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

rules[0].style.color = 'red';</code>

Internet Explorer는 cssRules 대신 규칙을 사용합니다.

데모는 다음과 같습니다. [Fiddle](http://jsfiddle.net/8Mnsf/1/)

위 내용은 ## 인라인 스타일 지정 없이 JavaScript로 CSS 규칙을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!