JavaScript를 사용하여 CSS 의사 요소를 어떻게 동적으로 조작할 수 있습니까?

JavaScript로 CSS 의사 요소 조작

CSS를 포함한 다양한 기술을 사용하면 JavaScript를 사용하여 CSS 의사 요소 스타일을 동적으로 변경할 수 있습니다. 변수 및 공급업체별 속성.

CSS 변수

웹킷 브라우저의 경우 의사 요소를 조작하기 위한 간단하고 브라우저 간 호환 가능한 솔루션은 CSS 변수입니다. 이러한 변수를 사용하면 CSS에서 스타일을 정의하고 JavaScript에서 해당 스타일에 액세스하고 변경할 수 있습니다. 이 방법을 적용하려면:

• 스타일 시트에서 다음과 같은 CSS 변수를 정의하세요.

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

• 의사 요소 스타일에서 다음을 참조하세요. var(--scrollbar-Background)를 사용하여 변수를 만듭니다. 예:

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

• 의사 요소의 스타일을 동적으로 변경하려면 JavaScript에서 CSS 변수의 값을 수정합니다.

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

공급업체별 속성

공급업체별 직접 타겟팅 WebKit 스크롤 막대와 같은 의사 요소의 경우 JavaScript에서 해당 공급업체 접두사를 사용할 수 있습니다. 예를 들어 다음 코드는 스크롤 막대 썸의 배경색을 설정합니다.

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

스크롤 막대를 숨기려면 공급업체별 속성인 -webkit-overflow-scrolling:

document.querySelector("#editor::-webkit-scrollbar").style.webkitOverflowScrolling = "hidden";

참고: 이러한 공급업체별 속성에 대한 브라우저 지원은 다를 수 있습니다. 프로덕션 코드에서 이러한 기술을 사용하기 전에 호환성 매트릭스를 확인하는 것이 좋습니다.

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