>웹 프론트엔드 >CSS 튜토리얼 >JavaScript를 사용하여 CSS 변수를 올바르게 수정하는 방법은 무엇입니까?

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

DDD
DDD원래의
2024-12-12 13:33:09295검색

How to Correctly Modify CSS Variables Using JavaScript?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.