JavaScript를 사용하여 CSS 변수를 프로그래밍 방식으로 어떻게 변경할 수 있습니까?-CSS 튜토리얼-php.cn

JavaScript를 사용하여 CSS 변수를 프로그래밍 방식으로 어떻게 변경할 수 있습니까?

Barbara Streisand

풀어 주다： 2024-12-10 18:35:14

원래의

742명이 탐색했습니다.

How Can I Programmatically Change CSS Variables with JavaScript?

JavaScript로 CSS 변수 변경

CSS 변수를 통해 프로젝트의 색상을 제어하면 테마를 쉽게 지정할 수 있습니다. 그러나 이러한 변수를 프로그래밍 방식으로 설정하는 것은 어려울 수 있습니다.

처음에는 setAttribute 및 jQuery의 .css 메서드를 사용하여 속성을 수정하려는 시도가 있었습니다. 그러나 이로 인해 오류가 발생했습니다.

해결 방법:

CSS 변수는 다음 세 가지 중 하나를 사용하여 편집할 수 있습니다. 메소드:

el.style.cssText:

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

로그인 후 복사

el.style. setProperty:

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

로그인 후 복사

el.setAttribute:

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

로그인 후 복사

마지막 방법은 처음에 사용되었지만 구문이 잘못되었습니다.

데모:

이 데모는 JavaScript에 의해 변경되는 배경색을 정의하는 CSS 변수를 보여줍니다. 2초 후:

<html>
<head>
  <style>
    html {
      --main-background-image: url(../images/starsBackground.jpg);
      --main-text-color: #4CAF50;
      --main-background-color: rgba(0,0,0,.25);
      --beta-background-color: rgba(0,0,0,.85);
    }

    body {
      background-color: var(--main-background-color);
    }
  </style>
</head>
<body onload="setTimeout(function() {
    document.documentElement.style.cssText = '--main-background-color: red';
  }, 2000);">
</body>
</html>

로그인 후 복사

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