JavaScript가 CSS 의사 요소 스타일을 동적으로 수정할 수 있습니까?

JavaScript로 CSS 의사 요소 스타일 수정: 자세히 살펴보기

다음을 통해 CSS 의사 요소의 스타일을 동적으로 변경할 수 있습니까? 자바스크립트? 스크롤 막대의 색상을 설정하고 완전히 숨기고 싶다고 가정해 보겠습니다. 그러나 다음과 같은 스크립트를 사용하면 "null의 'style' 속성을 읽을 수 없습니다." 오류가 반환됩니다.

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

Webkit 브라우저에서 효과적으로 작동하고 다른 브라우저에서는 정상적인 성능 저하를 허용하는 대체 접근 방식을 살펴보겠습니다.

스타일링을 위해 CSS 변수 활용

최신 브라우저는 CSS를 제공합니다. JavaScript에서 사용자 정의 CSS 속성을 정의하고 조작하는 강력한 방법을 제공하는 변수(CSS Vars). CSS Var를 사용하면 브라우저 간 호환성을 유지하면서 원하는 스타일 효과를 얻을 수 있습니다.

CSS에서 CSS Var --scrollbar-Background를 정의하고 스크롤 막대의 썸에 적용합니다.

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  background-color: #ccc;
  background-color: var(--scrollbar-background);
}

이제 JavaScript에서 #editor의 --scrollbar-Background 속성을 수정하세요. 요소:

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

CSS Vars를 JavaScript와 함께 활용하면 의사 요소 스타일을 쉽게 변경할 수 있으며 다양한 웹 브라우저에서 호환성을 보장할 수 있습니다.

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