JavaScript 允許存取 CSS 自訂屬性（也稱為 CSS 變數）

Question

如何使用JavaScript（普通或jQuery）來取得和設定CSS自訂屬性（透過樣式表中的var(…)存取的屬性）？這是我不成功的嘗試：點擊按鈕會更改通常的font-weight屬性，但不會更改自訂--mycolor屬性：

P粉421119778 · Answer

原生解決方案

取得/設定 CSS3 變數的標準方法是 .setProperty() 和 .getPropertyValue()。

如果您的變數是全域變數（在 :root 中宣告），您可以使用下列內容來取得和設定它們的值。

// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');

但是，如果已使用 .setProperty() 設定了 var 的值，則 getter 只會傳回該值。如果已通過CSS聲明設置，將返回undefined。在這個例子中檢查一下：

let c = document.documentElement.style.getPropertyValue('--myVariable');
alert('The value of --myVariable is : ' + (c?c:'undefined'));

:root{ --myVariable : red; }
div{ background-color: var(--myVariable); }

  Red background set by --myVariable

為了避免這種意外行為，您必須在呼叫 .getPropertyValue() 之前使用 getCompulatedStyle() 方法。然後吸氣劑將如下所示：

getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');

在我看來，存取CSS變數應該更簡單、快速、直覺和自然...

我個人的做法

我實作了CSSGlobalVariables 一個小型(以便更輕鬆地存取和操作.

// get the document CSS global vars
let cssVar = new CSSGlobalVariables();
// set a new value to --myVariable
cssVar.myVariable = 'red';
// get the value of --myVariable
console.log( cssVar.myVariable );

應用於物件屬性的任何變更都會自動轉換為 CSS 變數。

可用：https://github.com/colxi/ css-全域變數

P粉863295057 · Answer

您可以使用document.body.style.setProperty('--name', 值);：

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue);//set

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

原生解決方案

我個人的做法