'Uncaught TypeError: Cannot read property 'style' of null' 없이 JavaScript로 CSS 의사 요소 스타일을 수정하는 방법은 무엇입니까?

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

JavaScript를 사용하여 스크롤 막대의 색상과 표시 여부를 조정하는 동안 다음과 같은 문제가 자주 발생합니다. "잡히지 않은 TypeError: null의 'style' 속성을 읽을 수 없습니다." 오류. 이는 웹사이트가 기본적으로 스크롤을 비활성화하여 스크롤 막대 요소가 존재하지 않기 때문에 발생합니다.

이 제한 사항을 해결하려면 CSS Vars 기술을 사용할 수 있습니다. 이 방법에는 CSS에서 대체 값을 정의하고 JavaScript에서 CSS 변수를 사용하여 이를 동적으로 조작하는 작업이 포함됩니다.

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"));

이 접근 방식을 사용하면 "null" 오류 없이 스크롤 막대 스타일을 동적으로 수정할 수 있습니다. 이 기술은 모든 브라우저에서 지원되지 않을 수 있으므로 이전 브라우저의 경우 단계적 성능 저하를 고려하세요.

위 내용은 'Uncaught TypeError: Cannot read property 'style' of null' 없이 JavaScript로 CSS 의사 요소 스타일을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!