JavaScript를 사용하여 CSS 변수를 어떻게 동적으로 변경할 수 있습니까?

JS로 CSS 변수 편집

프로젝트 스타일을 동적으로 제어하기 위해 CSS 변수를 편집하려고 합니다. --main-Background-image 및 --main-text-color와 같은 변수를 정의한 경우 속성을 사용하여 해당 값을 변경하려고 하면 오류가 발생합니다.

근본 원인

발생한 오류는 CSS를 변경하기 위해 setAttribute 메소드를 잘못 사용했기 때문에 발생했습니다. 변수.

해결 방법

CSS 변수를 편집하는 방법에는 세 가지가 있습니다. JS:

• style.cssText:

  document.documentElement.style.cssText = "--main-background-color: red";

• style.setProperty:

  document.documentElement.style.setProperty("--main-background-color", "green");

• setAttribute ("스타일" 속성 사용):

  document.documentElement.setAttribute("style", "--main-background-color: green");

코드 조각에서 주석 처리된 줄을 위 방법 중 하나로 바꾸면 CSS 변수를 성공적으로 편집할 수 있습니다.

데모

다음 사항을 고려하세요. 예:

html {
  --main-background-color: rgba(0,0,0,.25);
}

body {
  background-color: var(--main-background-color);
}

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};

이 데모에서는 페이지 로드 후 2초 후에 --main-Background-color 값이 빨간색으로 변경됩니다.

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