JavaScript를 사용하여 CSS 의사 요소의 스타일을 동적으로 지정하는 방법은 무엇입니까?

JavaScript를 사용한 동적 CSS 의사 요소 스타일링

JavaScript를 사용하여 CSS 의사 요소 스타일을 수정하는 것이 가능합니까? 예를 들어 스크롤 막대 색상을 동적으로 조정하거나 숨깁니다. 그러나 이러한 스크립트를 사용하여 그렇게 하려고 하면 "TypeError: Cannot read property 'style' of null."

해결책: CSS 변수 소개

브라우저 간 상호 운용성은 우선 순위가 아닐 수 있으며 CSS 변수(CSS Vars)를 사용하면 WebKit 브라우저에서 효과적인 솔루션을 제공합니다. 이 방법을 사용하면 CSS에서 변수를 선언하고 JavaScript를 사용하여 동적으로 수정할 수 있습니다.

CSS에서 스크롤 막대 배경색을 변수로 정의합니다.

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

그런 다음 스크롤 막대 썸 스타일을 지정합니다. 변수 사용:

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

JavaScript에서는 #editor 요소의 변수 값을 변경할 수 있습니다.

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

이 접근 방식을 사용하면 직접 액세스하지 않고도 스크롤 막대 색상을 동적으로 수정할 수 있습니다. 의사 요소의 스타일을 사용하여 "TypeError" 문제를 방지합니다.

추가 예를 보려면 JavaScript를 사용한 CSS 변수 조작에 대한 리소스를 참조하세요: https://eager.io/blog/communicating-between-javascript -and-css-with-css-변수/

위 내용은 JavaScript를 사용하여 CSS 의사 요소의 스타일을 동적으로 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!