Javascript를 사용하여 스타일시트에 정의된 CSS 값을 동적으로 변경하려면 어떻게 해야 합니까?

Javascript를 사용하여 CSS 값 변경: 스타일시트 조작 이해

종종 Javascript를 사용하여 CSS 값을 동적으로 수정해야 하는 경우가 있습니다. 인라인 CSS 값을 설정하는 것은 간단하지만 스타일시트에 CSS를 정의할 때 문제가 발생할 수 있습니다.

예:

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

<code class="html"><div id="tId" style="width: 10px"></div></code>

해당 CSS:

<code class="css">#tId {
  width: 50%;
}</code>

Javascript를 사용하여 인라인 스타일 속성을 수정하면 아래와 같이 스타일시트 값이 재정의됩니다.

document.getElementById('tId').style.width = "30%";

결과는 다음과 같습니다.

<code class="html"><div id="tId" style="width: 30%"></div></code>

도전 과제:

이 접근 방식의 문제점은 다음과 같습니다.

• 인라인 값에만 영향을 미칩니다.
• 인라인 스타일이 없을 때 너비 값을 수정하기 전에 검색하면 Null이 반환됩니다.

해결책: 스타일시트 값 조작

이러한 과제를 해결하려면 다음이 필요합니다. 스타일시트에서 직접 값을 조작합니다. 이를 달성하는 방법은 다음과 같습니다.

1. document.styleSheets를 사용하여 스타일시트 배열을 가져옵니다.
2. document.styleSheets[styleIndex].href를 사용하여 수정하려는 특정 스타일시트를 찾습니다.
3. document.styleSheets[styleIndex].cssRules(대부분의 브라우저의 경우) 또는 document.styleSheets[styleIndex].rules(IE의 경우)를 사용하여 CSS 규칙 배열을 가져옵니다.
4. CSS 규칙 식별 selectorText 속성을 확인하여 변경하려고 합니다.

다음 코드는 이 접근 방식을 보여줍니다.

var styleIndex = ...; // Index of the targeted stylesheet
var ruleIndex = ...; // Index of the targeted CSS rule
var cssRuleCode = document.all ? 'rules' : 'cssRules';
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var value = rule.value; // Get the current value
rule.value = ...; // Modify the value

이 접근 방식을 구현하면 스타일시트에서 CSS 값을 효과적으로 조작할 수 있습니다. 변경 사항은 지정된 스타일의 모든 요소에 전역적으로 적용됩니다.

위 내용은 Javascript를 사용하여 스타일시트에 정의된 CSS 값을 동적으로 변경하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!