JavaScript를 사용하여 CSS 변수를 올바르게 수정하는 방법은 무엇입니까?

Style.setProperty를 사용하여 JavaScript로 CSS 변수를 편집하는 방법

CSS에서 변수를 사용하면 색상 테마 및 기타 설정을 한 번에 정의할 수 있습니다. 프로젝트 전반에 걸쳐 이를 사용하세요. JavaScript를 사용하여 이러한 변수를 동적으로 편집하려면 적절한 방법을 활용해야 합니다.

잘못된 방법:

코드에서 setAttribute를 사용하여 CSS 변수를 업데이트하려고 했습니다. 그러나 이 방법은 CSS 변수를 편집하는 데는 유효하지 않습니다.

올바른 방법:

CSS 변수를 편집하는 세 가지 올바른 방법이 있습니다. JavaScript:

1. documentElement.style.cssText:

   • 구문: documentElement.style.cssText = "--변수 이름: 새 값"

2. documentElement.style.setProperty:

   • 구문: documentElement.style.setProperty("- -변수 이름", "새 값")

3. documentElement.setAttribute('style'):

   • 구문: documentElement.setAttribute ('스타일', "--변수 이름: new-value")

예:

-main-ground-color 변수를 다음으로 변경하려면 red:

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

데모:

  
    
  

  
    <script>
      function changeColor() {
        setTimeout(() => {
          document.documentElement.style.cssText = &quot;--main-background-color: red&quot;;
        }, 2000);
      }
    </script>
  

이 데모에서는 페이지 로딩 2초 후 배경색이 빨간색으로 변경됩니다.

위 내용은 JavaScript를 사용하여 CSS 변수를 올바르게 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!