JavaScript는 어떻게 스크롤 막대와 같은 CSS 의사 요소를 동적으로 사용자 정의할 수 있습니까?

JavaScript를 사용하여 동적으로 CSS 의사 요소 사용자 정의

많은 개발자는 JavaScript를 사용하여 CSS 의사 요소 스타일을 동적으로 변경하는 문제에 직면합니다. 이 질문은 JavaScript 스크립트를 통해 스크롤 막대와 같은 요소의 모양과 동작을 수정할 수 있는 가능성을 탐구합니다.

스크롤 막대 색상 및 가시성 변경

이 질문은 스크롤 막대의 색상 및 가시성 수정:

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

그러나 이러한 스크립트는 브라우저 간 호환성 문제 및 선택한 요소의 null 값으로 인한 오류 반환.

CSS 변수를 사용한 크로스 브라우저 구현

브라우저 호환성은 우려 사항에 대한 대답은 CSS 변수(CSS Vars)를 사용하는 솔루션을 제안합니다. CSS Vars를 사용하면 JavaScript를 통해 CSS 속성을 동적으로 수정할 수 있습니다.

스크롤 막대 배경에 대한 CSS 변수를 정의하고 이를 의사 요소 규칙에 사용하면 다음을 사용하여 스크롤 막대 색상을 변경할 수 있습니다. JavaScript:

CSS:

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

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

JavaScript:

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

이 접근 방식을 사용하면 브라우저 제한에 관계없이 스크롤바 색상이 변경됩니다.

위 내용은 JavaScript는 어떻게 스크롤 막대와 같은 CSS 의사 요소를 동적으로 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!