JavaScript를 사용하여 인라인이 아닌 CSS 값에 프로그래밍 방식으로 액세스하고 변경하려면 어떻게 해야 합니까?

Javascript로 CSS 값 변경

인라인이 아닌 CSS 값에 액세스

JavaScript에서, 인라인 CSS 값은 다음을 사용하여 쉽게 수정할 수 있습니다. document.getElementById('id').style.width = 값. 그러나 이 방법은 스타일시트에 정의된 인라인이 아닌 CSS 값을 처리할 때 문제가 됩니다. JavaScript를 사용하여 이러한 값을 검색하면 Null이 반환되므로 특정 논리 연산을 수행하기가 어렵습니다.

프로그래밍 방식으로 스타일 속성 수정

이 문제를 해결하려면 CSS 스타일시트에 액세스하여 프로그래밍 방식으로 수정되었습니다. 방법은 다음과 같습니다.

1. document.styleSheets를 사용하여 스타일시트 배열을 검색합니다.
2. document.styleSheets[styleIndex].href 속성을 예상 경로와 비교하여 특정 스타일시트를 찾습니다.
3. IE에서 document.styleSheets[styleIndex].rules를 사용하여 CSS 규칙 배열을 가져오거나 다른 브라우저의 document.styleSheets[styleIndex].cssRules.
4. selectorText 속성을 알려진 선택기(예: #tId)와 비교하여 원하는 규칙을 식별합니다.

규칙이 한 번 식별되면 해당 값 속성을 읽고 설정할 수 있습니다. 이를 통해 인라인 스타일을 변경하지 않고도 CSS 값을 검색하고 수정할 수 있습니다. 다음 코드는 이 프로세스를 보여줍니다.

var styleIndex = 0; // Index of the stylesheet to modify
var ruleIndex = 1; // Index of the rule to modify
var cssRuleCode = document.all ? 'rules' : 'cssRules'; // Account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; // e.g., '#tId'
var value = rule.value; // Get the current value or set a new value using `rule.value = 'new_value'`

위 내용은 JavaScript를 사용하여 인라인이 아닌 CSS 값에 프로그래밍 방식으로 액세스하고 변경하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!