JavaScript가 CSS 규칙 세트를 동적으로 수정할 수 있습니까?

JavaScript로 CSS 규칙 세트 조작

질문:

JavaScript를 사용하여 CSS 규칙 세트를 동적으로 수정할 수 있습니까? 예를 들어 웹에서 동일한 클래스를 가진 여러 요소의 스타일을 변경하는 등 페이지?

답변:

JavaScript를 사용하여 CSS를 변경할 수 있지만 프로세스에는 약간의 복잡성이 있습니다. 이에 대한 포괄적인 가이드는 "Javascript를 사용한 완전히 Pwn CSS" 기사에서 찾을 수 있습니다.

앞서 언급한 수정 사항을 구현하려면 다음 단계를 따르십시오.

1. 다음을 사용하여 규칙 세트에 액세스합니다. DOM 메소드.
2. 원하는 대로 규칙 세트 속성을 수정합니다.
3. 업데이트된 규칙 세트를 다음에 다시 적용합니다.

구현:

Firefox 및 IE: 아래 코드는 다음 브라우저에서 작동하도록 테스트되었습니다.

// Access the rule-set
var styleSheet = document.styleSheets[0]; // assuming there's only one
var ruleSet = styleSheet.cssRules[0]; // assuming there's only one

// Modify the rule-set
ruleSet.style.color = "red";

// Reapply the updated rule-set
stylesheet.insertRule(ruleSet.cssText, 0);

Chrome: 업데이트 포함 이제 앞서 언급한 DOM 메소드를 Chrome에서 지원할 수 있습니다.

위 내용은 JavaScript가 CSS 규칙 세트를 동적으로 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!