JavaScript가 전체 CSS 스타일시트를 동적으로 수정할 수 있습니까?

JavaScript를 사용하여 동적으로 CSS 스타일시트 수정

JavaScript를 사용하여 개별 요소의 스타일뿐만 아니라 CSS 스타일시트도 수정할 수 있나요?

해결책

예, IE9 이상을 포함한 최신 브라우저에서는 JavaScript를 사용하여 CSS 스타일시트를 수정할 수 있습니다. 이 기능은 단순히 요소의 스타일을 변경하는 것 이상으로 확장되어 스타일시트 자체를 변경할 수 있습니다.

스타일시트 수정 방법

스타일시트를 수정하는 세 가지 기본 JavaScript 방법이 있습니다. :

• insertRule(): 스타일시트에 새 규칙을 동적으로 추가합니다.
• deleteRule(): 스타일시트에서 기존 규칙을 제거합니다.
• cssRules: 규칙에 대한 액세스를 제공합니다. 이내에 스타일시트.

예

프로세스를 설명하려면 다음 코드 조각을 고려하세요.

// Get the stylesheet
var stylesheet = document.styleSheets[0];

// Insert a new rule at the end of the stylesheet
stylesheet.insertRule("#my-element { color: red; }", stylesheet.cssRules.length);

// Print the newly added rule
console.log(stylesheet.cssRules[stylesheet.cssRules.length - 1]);

이 예에서는 새로운 규칙이 스타일시트에 추가되어 "my-element" 클래스가 있는 요소의 색상을 빨간색으로 설정합니다.

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