JavaScript가 인라인 스타일을 넘어 CSS 스타일시트를 직접 수정할 수 있습니까?-CSS 튜토리얼-php.cn

JavaScript가 인라인 스타일을 넘어 CSS 스타일시트를 직접 수정할 수 있습니까?

Barbara Streisand

풀어 주다： 2024-12-16 15:01:10

원래의

836명이 탐색했습니다.

Can JavaScript Directly Modify CSS Stylesheets Beyond Inline Styling?

명확하게 설명하자면, 질문은 특히 스타일시트의 콘텐츠 수정과 관련이 있습니다. 단순히 JavaScript로 요소의 스타일 속성을 변경하는 것이 아닙니다.

동적 스타일시트 변경

JavaScript를 사용하여 CSS 스타일시트를 동적으로 수정하기 위해 최신 브라우저에서는 규칙을 추가하는 insertRule() 메서드와 deleteRule을 제공합니다. () 기존 규칙을 제거하는 방법입니다.

또한 스타일시트의 cssRules 속성을 사용하면 개별 규칙에 대한 액세스가 허용됩니다. 규칙이 포함되어 있습니다. 이를 통해 규칙 조작을 보다 세밀하게 제어할 수 있습니다.

Dirty Hacks를 넘어서

let styleSheet = document.styleSheets[0];
styleSheet.insertRule("#id { color: red; }", 0);  // Adds a rule to the beginning of the stylesheet
styleSheet.deleteRule(0);  // Removes the rule that was just added

로그인 후 복사

새로운 스타일 요소를 생성하여 헤드에 삽입하는 것과 같은 "더티" 방법에 의지하고 싶은 유혹이 있을 수 있습니다. 그러나 이 접근 방식에는 몇 가지 단점이 있습니다.

let rule = styleSheet.cssRules[0];
rule.selectorText = "#new_id";  // Changes the selector for a rule
rule.style.color = "blue";  // Modifies the style properties defined by a rule

로그인 후 복사

중복 규칙 정의로 인한 스타일시트 충돌

스타일 블록을 동적으로 생성하고 구문 분석할 때 발생할 수 있는 성능 문제

브라우저에 대한 의존성- 특정 동작