JavaScript로 CSS 스타일시트 값을 어떻게 수정할 수 있습니까?

JavaScript를 사용하여 CSS 스타일 액세스 및 수정

JavaScript를 사용하여 CSS 스타일을 수정할 때는 올바른 요소와 값을 대상으로 지정하는 것이 중요합니다. 인라인 CSS 값은 쉽게 변경할 수 있지만 스타일시트 내에 정의된 값을 얻고 수정하는 것은 어려울 수 있습니다.

CSS 스타일시트 값 액세스

주어진 CSS 스타일시트 값에 액세스하려면 id, 다음 단계를 따르세요.

1. document.styleSheets를 사용하여 모든 스타일시트를 검색합니다.
2. href 속성을 기반으로 원하는 스타일시트를 결정합니다.
3. 규칙 배열을 가져옵니다. (예: 대부분의 브라우저에서는 cssRules, IE에서는 규칙).
4. selectorText 속성을 사용하여 특정 규칙을 식별합니다.

CSS 스타일시트 값 수정

원하는 규칙이 식별되면 이를 수정할 수 있습니다.

1. selectorText 속성을 설정하여 선택기를 변경합니다(예: #tId에서 #newId로).
2. 설정 value 속성을 사용하여 CSS 값을 변경합니다(예: 너비: 50%에서 너비: 30%로).

예

제공된 시나리오에서:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

다음 JavaScript를 사용하여 스타일시트의 너비 속성을 수정할 수 있습니다.

var rule = document.styleSheets[0].cssRules[0];
rule.selectorText = "#tId";
rule.value = "width: 30%";

이렇게 하면 스타일시트 규칙이 다음과 같이 업데이트됩니다.

#tId {
      width: 30%;
   }

인라인 스타일은 여전히 ​​스타일시트 값보다 우선합니다. 인라인 스타일을 재정의하려면 document.getElementById('id').style.width = value.

를 사용하세요.

위 내용은 JavaScript로 CSS 스타일시트 값을 어떻게 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!