JavaScript 변경 사항이 CSS :root 변수에 영향을 주지 않는 이유는 무엇입니까?

JavaScript로 CSS :root 색상 변수 변경

사용자는 색상 변수를 조정하여 웹페이지의 테마를 변경하는 시스템을 구현하려고 합니다. CSS의 :root 섹션에 정의되어 있습니다. 테마를 설정하기 위해 JavaScript 코드를 구현했음에도 불구하고 변경 사항이 관찰되지 않습니다.

제공된 코드는 --main-color 변수를 변경하려고 시도하지만 올바른 구문을 사용하지 않습니다. JavaScript에서 :root 변수를 수정하는 올바른 방법은 document.documentElement.style.setProperty() 메서드를 사용하는 것입니다. JavaScript 코드에 다음 줄을 추가해야 합니다.

document.documentElement.style.setProperty('--main-color', '#YOURCOLOR');

여기서 #YOURCOLOR는 원하는 색상 값을 나타냅니다. 예를 들어 기본 색상을 파란색으로 설정하려면 다음 줄을 사용해야 합니다.

document.documentElement.style.setProperty('--main-color', '#0000FF');

이 줄을 JavaScript 코드에 통합하면 사용자는 :root 색상 변수를 동적으로 변경할 수 있습니다. 웹페이지 테마를 맞춤설정할 수 있습니다.

위 내용은 JavaScript 변경 사항이 CSS :root 변수에 영향을 주지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!