기존 스타일을 덮어쓰지 않고 JavaScript에서 CSS 선언 개체를 수정하는 방법은 무엇입니까?

CSS 선언 객체 액세스 및 수정

웹 개발 시 인라인 스타일에 의지하지 않고 CSS 스타일을 수정해야 할 수도 있습니다. 기존 스타일을 덮어쓰고 기능을 방해할 수 있습니다. 이 문서에서는 JavaScript를 사용하여 CSS 선언 개체에 액세스하고 수정하는 방법을 보여줍니다.

다음 CSS 코드를 고려하세요.

<code class="css">.box {
  color: green;
}

.box:hover {
  color: blue;
}</code>

이 CSS는 마우스를 올리면 파란색으로 변하는 녹색 텍스트가 포함된 상자를 만듭니다. 그러나 색상에 인라인 스타일을 적용하면 마우스 오버 동작이 손실됩니다.

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

이 문제를 방지하려면 CSS 선언 개체에 액세스하여 직접 수정할 수 있습니다. JavaScript는 스타일시트에 해당하는 DOM 스타일시트 객체에 cssRules 속성을 제공합니다. 이 속성을 사용하여 모든 CSS 규칙의 배열을 가져올 수 있습니다.

CSS 규칙을 수정하려면 규칙 개체의 스타일 속성을 사용할 수 있습니다. 예를 들어 상자 색상을 빨간색으로 변경하려면 다음 JavaScript를 사용할 수 있습니다.

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

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

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

다음 데모를 볼 수 있습니다. 이 기술은 http://jsfiddle.net/8Mnsf/1/에 있습니다.

위 내용은 기존 스타일을 덮어쓰지 않고 JavaScript에서 CSS 선언 개체를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!