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