JavaScript로 CSS 의사 요소 스타일을 수정할 수 있나요?

JavaScript를 사용하여 CSS 의사 요소 스타일 수정

JavaScript를 통해 CSS 의사 요소의 스타일을 변경하는 것이 가능합니까?

다음을 고려하세요. 이 코드를 사용하여 스크롤 막대의 색상을 동적으로 설정하는 예:

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

그러나 브라우저는 다음 오류로 응답합니다. "Uncaught TypeError: Cannot read property 'style' of null."

이 작업을 다른 방식으로 수행할 수 있습니까?

웹킷 브라우저에서는 CSS Vars를 활용하여 이 작업을 수행할 수 있습니다.

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

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

JavaScript에서 이 값을 조작하려면:

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

JavaScript를 사용하여 CSS 변수를 관리하는 추가 예는 다음 리소스를 참조하세요: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

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