通過(guò)js控制修改css變量的具體示例
前言
在JavaScript中，你可以通過(guò)操作CSS變量（也稱(chēng)為自定義屬性）來(lái)動(dòng)態(tài)改變樣式。CSS變量在CSS中使用 – 前綴定義，例如 --main-color: red;。在JavaScript中，你可以使用 document.documentElement.style.setProperty 方法來(lái)設(shè)置這些變量，或者使用元素的 style.setProperty 方法（如果變量是在某個(gè)特定元素上定義的）。
以下是一些具體的示例：
1. 在全局范圍內(nèi)設(shè)置CSS變量
假設(shè)你有一個(gè)CSS變量 --main-color 定義在 :root 中：
:root {
--main-color: red;
}
你可以使用JavaScript來(lái)修改這個(gè)變量：
document.documentElement.style.setProperty('--main-color', 'blue');
這樣，所有使用了 --main-color 的元素都會(huì)更新為藍(lán)色。
2. 在特定元素上設(shè)置CSS變量
如果你有一個(gè)CSS變量定義在某個(gè)特定的元素上，例如：
.my-element {
--border-color: black;
}
你可以通過(guò)該元素的 style.setProperty 方法來(lái)修改這個(gè)變量：
const element = document.querySelector('.my-element');
element.style.setProperty('--border-color', 'green');
3. 讀取CSS變量的值
你也可以使用 getComputedStyle 方法來(lái)讀取CSS變量的值：
const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); // 輸出 "blue"（假設(shè)之前已經(jīng)被設(shè)置為藍(lán)色）
4. 示例：動(dòng)態(tài)改變背景顏色
下面是一個(gè)完整的示例，展示如何通過(guò)按鈕點(diǎn)擊事件動(dòng)態(tài)改變CSS變量的值，從而改變頁(yè)面的背景顏色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables with JavaScript</title>
<style>
:root {
--bg-color: lightblue;
}
body {
background-color: var(--bg-color);
}
</style>
</head>
<body>
<button id="changeColorBtn">Change Background Color</button>
<script>
const changeColorBtn = document.getElementById('changeColorBtn');
changeColorBtn.addEventListener('click', () => {
const newColor = prompt('Enter a new color:');
document.documentElement.style.setProperty('--bg-color', newColor);
});
</script>
</body>
</html>
在這個(gè)示例中，點(diǎn)擊按鈕后會(huì)彈出一個(gè)提示框，讓用戶(hù)輸入一個(gè)新的顏色值。然后，JavaScript會(huì)修改 :root 中的 --bg-color 變量，從而改變整個(gè)頁(yè)面的背景顏色。
通過(guò)這些方法，你可以靈活地使用JavaScript來(lái)動(dòng)態(tài)控制CSS變量的值，從而實(shí)現(xiàn)豐富的交互效果。
附：JS中修改css中的自定義變量
var root = document.querySelector(':root');
root.style.setProperty('--customHeight', "36px");總結(jié)
到此這篇關(guān)于通過(guò)js控制修改css變量的文章就介紹到這了,更多相關(guān)js控制修改css變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript網(wǎng)頁(yè)表單form中禁止自動(dòng)提交的兩種方式
本文是我本人在開(kāi)發(fā)網(wǎng)頁(yè)時(shí),在表單中加入了button按鈕,本來(lái)是用于jQuery點(diǎn)擊相應(yīng)事件的按鈕,然后,但我點(diǎn)擊button時(shí),發(fā)現(xiàn)不是達(dá)到j(luò)Query指定效果,所以在本文中,我們將討論網(wǎng)頁(yè)表單（form）中提交的兩種方式,需要的朋友可以參考下2024-06-06
引入外部js腳本加載慢與頁(yè)面白屏問(wèn)題的解決
最近做的一個(gè)項(xiàng)目需要引入一個(gè)外部的第三方j(luò)s腳本。發(fā)現(xiàn)加載比較慢，這篇文章主要介紹了引入外部js腳本加載慢與頁(yè)面白屏問(wèn)題的解決，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript使用padStart()方法進(jìn)行字符串填充的實(shí)戰(zhàn)指南
在編程實(shí)踐中,字符串填充是高頻操作需求,無(wú)論是格式化輸出、數(shù)據(jù)對(duì)齊還是生成固定格式標(biāo)識(shí)符,都需要高效可靠的填充方案,本文將深入探討JavaScript中最優(yōu)雅的字符串填充方案——padStart()方法,需要的朋友可以參考下2025-10-10
js實(shí)現(xiàn)checkbox全選、不選與反選的方法
這篇文章主要介紹了js實(shí)現(xiàn)checkbox全選、不選與反選的方法,以實(shí)例形式詳細(xì)分析了實(shí)現(xiàn)的思路及對(duì)應(yīng)的html與js代碼的實(shí)現(xiàn)過(guò)程,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript實(shí)現(xiàn)函數(shù)執(zhí)行攔截的多種方法
函數(shù)執(zhí)行攔截是JavaScript中強(qiáng)大的元編程技術(shù),可以實(shí)現(xiàn)日志記錄、性能監(jiān)控、權(quán)限控制等功能,本文將深入探討多種函數(shù)攔截方法,從基礎(chǔ)到高級(jí),幫助您全面掌握這一技術(shù),需要的朋友可以參考下2025-06-06
JavaScript頁(yè)面滾動(dòng)事件舉例詳解
這篇文章主要介紹了頁(yè)面滾動(dòng)事件的基礎(chǔ)概念、應(yīng)用場(chǎng)景及優(yōu)化技巧,幫助開(kāi)發(fā)者在實(shí)際項(xiàng)目中靈活使用滾動(dòng)事件,提升用戶(hù)體驗(yàn),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
TypeScript遍歷Array的方法(for,forEach,every)
本文主要介紹了TypeScript遍歷Array的方法(for,forEach,every)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
自定義事件解決重復(fù)請(qǐng)求BUG的問(wèn)題
下面小編就為大家?guī)?lái)一篇自定義事件解決重復(fù)請(qǐng)求BUG的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
es6學(xué)習(xí)筆記之Async函數(shù)基本教程
這篇文章主要給大家介紹了關(guān)于es6中Async函數(shù)的基本教程，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)async函數(shù)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
這篇文章主要幫助大家輕松掌握J(rèn)avaScript享元模式，告訴大家想什么是js享元模式，感興趣的小伙伴們可以參考一下2016-08-08