JavaScript에서 CSS 의사 클래스 규칙을 동적으로 변경하려면 어떻게 해야 합니까?

JavaScript에서 CSS 의사 클래스 규칙 변경

JavaScript에서 CSS 의사 클래스 선택기를 동적으로 수정하려고 할 때 다음과 같은 사실을 접할 수 있습니다. 이러한 규칙을 직접 조작하는 것은 불가능합니다. :link 및 :hover와 같은 의사 클래스는 전역 범위에서 작동하여 해당 기준과 일치하는 문서 내의 모든 요소에 영향을 미칩니다.

한 가지 잠재적인 해결 방법은 스타일시트 자체를 수정하는 것입니다. 고유한 ID를 가진 특정 요소를 대상으로 하는 규칙을 추가하면 유사 클래스 스타일을 적용하는 것이 가능해집니다.

#elid:hover { background: red; }

각 요소에 고유한 ID가 있다고 가정하면 이 기술을 사용하여 대상 스타일 지정이 가능합니다.

또는 DOM-레벨-2-스타일 사양은 보다 표준화된 접근 방식을 제공합니다.

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);

IE에는 자체적인 접근 방식이 필요합니다. 구문:

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);

이러한 방법은 더 큰 유연성을 제공하지만 단점도 있습니다. 동적 스타일시트 조작은 복잡하고 오류가 발생하기 쉽습니다. 또한 오래되고 덜 일반적인 브라우저에서는 이 기능을 지원하지 않을 수 있습니다. 따라서 이러한 접근 방식을 프로덕션 코드에 구현하기 전에 그 필요성과 타당성을 고려하는 것이 중요합니다.

위 내용은 JavaScript에서 CSS 의사 클래스 규칙을 동적으로 변경하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!