JavaScript를 사용하여 CSS 변수를 프로그래밍 방식으로 어떻게 변경할 수 있습니까?
- Barbara Streisand원래의
- 2024-12-10 18:35:14743검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.