JavaScript를 사용하여 CSS 의사 요소 스타일을 어떻게 동적으로 변경할 수 있습니까?

JavaScript를 통해 CSS 의사 요소 스타일을 동적으로 조작

JavaScript를 통해 CSS 의사 요소 스타일을 동적으로 변경하려고 시도하는 동안 사용자는 다음과 같은 문제를 경험할 수 있습니다. "잡히지 않은 TypeError: null인 'style' 속성을 읽을 수 없습니다." 오류. 이 기사에서는 특히 WebKit 브라우저에서 브라우저 간 호환성을 달성하기 위해 CSS 변수를 활용하는 대체 접근 방식을 살펴봅니다.

CSS 변수 기반 접근 방식

CSS에서 CSS 변수를 정의합니다. 스크롤바 배경색:

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

그런 다음 스크롤바에 변수를 적용합니다. 의사 요소:

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback color */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

JavaScript 조작

JavaScript에서 #editor 요소에 CSS 변수를 설정합니다.

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

이것은 메서드를 사용하면 최신 CSS 기능을 지원하지 않는 이전 브라우저에서도 스크롤 막대 배경색을 동적으로 조작할 수 있습니다.

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