快捷導(dǎo)航

JavaScript如何獲取CSS中定義var變量值

更新時(shí)間：2025年07月23日 09:21:35 作者：前端?賈公子

CSS變量是該語言的非常受歡迎的補(bǔ)充,盡管它們非?；A(chǔ),下面這篇文章主要介紹了JavaScript如何獲取CSS中定義var變量值的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在 JavaScript 中，可以通過 getComputedStyle() 方法結(jié)合 getPropertyValue() 來獲取 CSS 中定義的變量值。以下是具體的實(shí)現(xiàn)方法：

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>獲取 CSS 變量</title>
  <style>
    :root {
      --main-color: #3498db;
    }
    body {
      background-color: var(--main-color);
    }
  </style>
</head>
<body>
  <script>
    // 獲取根元素
    const root = document.documentElement;

    // 獲取 CSS 變量值
    const mainColor = getComputedStyle(root).getPropertyValue('--main-color').trim();

    console.log('CSS變量 --main-color 的值是:', mainColor);
  </script>
</body>
</html>

說明

:root 定義變量：CSS 變量通常在 :root 中定義，確保全局可用。
getComputedStyle()：用于獲取指定元素的所有計(jì)算樣式。
getPropertyValue()：從計(jì)算樣式中提取指定的 CSS 變量值。
.trim()：去除可能存在的多余空格。

通過這種方式，你可以輕松獲取并動(dòng)態(tài)使用 CSS 變量的值！

CSS3 :root 選擇器

:root選擇器用匹配文檔的根元素。

設(shè)置HTML文檔的背景色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
:root
{
	background:#ff0000;
}
</style>
</head>
<body>

<h1>菜鳥教程</h1>

</body>
</html>

在HTML中根元素始終是HTML元素。

CSSStyleDeclaration getPropertyValue() 方法

getPropertyValue() 方法返回指定的 CSS 屬性的值。

object.getPropertyValue(propertyname)

參數(shù)	描述
propertyname	必需。一個(gè)字符串，表示要檢測的屬性名。

返回 color 屬性的值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
#ex1 {
  color: red !important;
}
</style>
</head>
<body>
<h1>getPropertyValue() 方法</h1>

<p>點(diǎn)擊按鈕返回 color 屬性值。</p>

<button onclick="myFunction()">點(diǎn)我</button>

<div id="ex1">一些文本。</div>

<script>
function myFunction() {
  var declaration = document.styleSheets[0].cssRules[0].style;
  var propvalue = declaration.getPropertyValue("color");
  alert(propvalue);
}
</script>

</body>
</html>

styleSheets

定義：一個(gè)只讀屬性，返回文檔中所有 外部和內(nèi)聯(lián)樣式表 的集合（StyleSheetList 對(duì)象）。
包含內(nèi)容：
- <link rel="stylesheet"> 引入的外部 CSS 文件
- <style> 標(biāo)簽定義的內(nèi)部 CSS
- 通過 @import 導(dǎo)入的樣式表

屬性示例：

// 獲取文檔中第一個(gè)樣式表
const firstStyleSheet = document.styleSheets[0];

cssRules

定義：CSSStyleSheet 對(duì)象的屬性，返回樣式表中所有 CSS 規(guī)則 的集合（CSSRuleList 對(duì)象）。

包含內(nèi)容：

普通規(guī)則（如 div { color: red; }）
@ 規(guī)則（如 @media, @keyframes, @font-face）

訪問規(guī)則：

// 獲取第一個(gè)樣式表中的所有 CSS 規(guī)則
const rules = document.styleSheets[0].cssRules;

關(guān)鍵特性

屬性/方法	說明
`styleSheets.length`	文檔中樣式表的數(shù)量
`cssRules.length`	單個(gè)樣式表中 CSS 規(guī)則的數(shù)量
`cssRules[index]`	獲取具體規(guī)則（返回 `CSSStyleRule` 對(duì)象）
`rule.style`	訪問規(guī)則的樣式屬性（如 `cssRules[0].style.color = "blue"`）
`insertRule()`	向樣式表插入新規(guī)則（需指定索引）
`deleteRule()`	刪除樣式表中的規(guī)則

使用示例

// 獲取第一個(gè)樣式表
const styleSheet = document.styleSheets[0];

// 遍歷所有 CSS 規(guī)則
for (let rule of styleSheet.cssRules) {
  if (rule instanceof CSSStyleRule) { // 過濾普通樣式規(guī)則
    console.log("選擇器:", rule.selectorText);
    console.log("樣式:", rule.style.cssText);
  }
}

// 修改第一條規(guī)則的背景色
styleSheet.cssRules[0].style.backgroundColor = "yellow";

// 添加新規(guī)則
styleSheet.insertRule("body { font-size: 20px; }", 0);

// 刪除第一條規(guī)則
styleSheet.deleteRule(0);

注意事項(xiàng)

同源策略限制：
跨域樣式表（如 CDN 引入的 CSS）的 cssRules 可能為 null（需 CORS 支持）。
@import 規(guī)則：
導(dǎo)入的樣式表會(huì)作為獨(dú)立條目出現(xiàn)在 styleSheets 中。
動(dòng)態(tài)修改：
通過 cssRules 修改的樣式會(huì) 實(shí)時(shí)生效，但不會(huì)影響原始 CSS 文件。
規(guī)則類型判斷：
使用 instanceof 區(qū)分規(guī)則類型（如 CSSMediaRule、CSSKeyframesRule）。

典型應(yīng)用場景

動(dòng)態(tài)分析/修改頁面樣式
實(shí)現(xiàn) CSS 調(diào)試工具
按條件啟用/禁用特定樣式規(guī)則
程序化生成動(dòng)畫（操作 @keyframes）

通過 document.styleSheets 和 cssRules，開發(fā)者能以編程方式深度操作 CSS，實(shí)現(xiàn)靈活的樣式控制。

Window getComputedStyle() 方法

getComputedStyle() 方法用于獲取指定元素的 CSS 樣式。

獲取的樣式是元素在瀏覽器中最終渲染效果的樣式。

window.getComputedStyle(element, pseudoElement)

參數(shù)說明：

element: 必需，要獲取樣式的元素。
pseudoElement: 可選，偽類元素，當(dāng)不查詢偽類元素的時(shí)候可以忽略或者傳入 null。

返回值

返回的對(duì)象是 CSSStyleDeclaration 類型的對(duì)象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<p>點(diǎn)擊按鈕計(jì)算 DIV 的背景顏色。</p>
<p><button onclick="myFunction()">點(diǎn)我</button></p>
<div id="test" style="height: 50px;background-color: rgb(178, 116, 230);">測試 DIV</div>
<p>計(jì)算值為: <span id="demo"></span></p>

<script>
function myFunction(){
    var elem = document.getElementById("test");
    var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
    document.getElementById("demo").innerHTML = theCSSprop;
}
</script>

</body>
</html>

Window getComputedStyle() 方法和 style 的異同

getComputedStyle 和 element.style 的相同點(diǎn)就是二者返回的都是 CSSStyleDeclaration 對(duì)象，取相應(yīng)屬性值得時(shí)候都是采用的 CSS 駝峰式寫法，均需要注意 float 屬性。

而不同點(diǎn)就是：

element.style 讀取的只是元素的內(nèi)聯(lián)樣式，即寫在元素的 style 屬性上的樣式；而 getComputedStyle 讀取的樣式是最終樣式，包括了內(nèi)聯(lián)樣式、嵌入樣式和外部樣式。
element.style 既支持讀也支持寫，我們通過 element.style 即可改寫元素的樣式。而 getComputedStyle 僅支持讀并不支持寫入。我們可以通過使用 getComputedStyle 讀取樣式，通過 element.style 修改樣式