如何使用 JavaScript（普通或 jQuery）來取得和設定 CSS 自訂屬性（透過樣式表中的 var(…) 存取的屬性）？
這是我不成功的嘗試：點擊按鈕會更改通常的 font-weight 屬性，但不會更改自訂 --mycolor 屬性：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
body {
--mycolor: yellow;
background-color: var(--mycolor);
}
</style>
</head>
<body>
<p>Let's try to make this text bold and the background red.</p>
<button onclick="plain_js()">Plain JS</button>
<button onclick="jQuery_()">jQuery</button>
<script>
function plain_js() {
document.body.style['font-weight'] = 'bold';
document.body.style['--mycolor'] = 'red';
};
function jQuery_() {
$('body').css('font-weight', 'bold');
$('body').css('--mycolor', 'red');
}
</script>
</body>
</html>
原生解決方案
取得/設定 CSS3 變數的標準方法是
.setProperty()和.getPropertyValue()。如果您的變數是全域變數（在
:root中宣告），您可以使用下列內容來取得和設定它們的值。// setter document.documentElement.style.setProperty('--myVariable', 'blue'); // getter document.documentElement.style.getPropertyValue('--myVariable');但是，如果已使用
.setProperty()設定了 var 的值，則 getter 只會傳回該值。 如果已通過CSS聲明設置，將返回undefined。在這個例子中檢查一下：為了避免這種意外行為，您必須在呼叫
.getPropertyValue()之前使用getCompulatedStyle()方法。 然後吸氣劑將如下所示：getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');在我看來，存取CSS變數應該更簡單、快速、直覺和自然...
我個人的做法
我實作了
CSSGlobalVariables一個小型(以便更輕鬆地存取和操作.應用於物件屬性的任何變更都會自動轉換為 CSS 變數。
可用：https://github.com/colxi/ css-全域變數
您可以使用
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