如何使用JS編輯CSS變量？

我有這些CSS變量來控制我的項目的顏色，所以我可以做主題。如何使用JS編輯CSS變量？

html { 
    --main-background-image: url(../images/starsBackground.jpg); 
    --main-text-color: #4CAF50; 
    --main-background-color: rgba(0,0,0,.25); 
    --beta-background-color: rgba(0,0,0,.85); 
}

然而不管我如何努力改變屬性（這兩個註釋行分別試過），我得到的最接近的是不返回一個有效的屬性。

function loadTheme() { 
    var htmlTag = document.getElementsByTagName("html"); 
    var yourSelect = document.getElementById("themeSelect"); 
    var selectedTheme = (yourSelect.options[ yourSelect.selectedIndex ].value); 
    // htmlTag[0].setAttribute('--main-text-color', '#FFCF40'); 
    // $("html").css("--main-text-color","#FFCF40"); 
}

the error message

來源

2016-12-28 David Richards

我不記得'--main-text-color'是一個有效的CSS屬性。那是使用預處理器嗎？ – ochi

不，它是一個css變量。我在這篇文章中發現了他們 –

https：//www.broken-links。COM/2014/08/28/CSS-變量更新管理自定義屬性的JavaScript/ –

原來改變CSS變量可以使用el.style.cssText財產，或el.style.setProperty或el.setAttribute方法。在您的代碼片段el.setAttribute中使用不正確，這會導致您遇到的錯誤。下面是正確的方法：

var html = document.getElementsByTagName('html')[0]; 
html.style.cssText = "--main-background-color: red";

或

var html = document.getElementsByTagName('html')[0]; 
html.style.setProperty("--main-background-color", "green");

或

var html = document.getElementsByTagName('html')[0]; 
html.setAttribute("style", "--main-background-color: green");

演示

下面的演示定義使用CSS可變背景顏色，然後改變它使用JS片段。

window.onload = function() { 
 
    var html = document.getElementsByTagName('html')[0]; 
 
    html.style.cssText = "--main-background-color: red"; 
 
};

html { 
 
    --main-background-image: url(../images/starsBackground.jpg); 
 
    --main-text-color: #4CAF50; 
 
    --main-background-color: rgba(0,0,0,.25); 
 
    --beta-background-color: rgba(0,0,0,.85); 
 
} 
 

 
body { 
 
    background-color: var(--main-background-color); 
 
}

這隻會在瀏覽器支持CSS變量顯然工作。

來源

2016-12-28 23:16:37

這將覆蓋現有的內聯樣式。 – Oriol

它可能會更容易地定義你的CSS包含各種主題風格類（.theme1 {...}，.theme2 {...}等），然後更改基於所選值與JS類。

來源

2016-12-28 22:59:14 johnniebenson

這是比回答更多的評論 – ochi

我沒有想到這一點。我會給你一個機會，並回復你 –

你可以添加類似如下（不使用類變量）

function loadTheme() { 
 
    var htmlTag = document.getElementById("myDiv"); 
 
    var yourSelect = document.getElementById("themeSelect"); 
 
    var selectedTheme = (yourSelect.options[yourSelect.selectedIndex].value); 
 
    console.log("selected theme: " + selectedTheme); 
 

 
    // reset class names 
 
    htmlTag.className = ''; 
 
    // add selected theme 
 
    htmlTag.className = 'theme' + selectedTheme; 
 
}

.theme1 { 
 
    color: blue; 
 
} 
 
.theme2 { 
 
    color: red; 
 
}

<div id="myDiv"> 
 
    test 
 
</div> 
 
<select id="themeSelect" onChange="loadTheme()"> 
 
    <option value="1">Theme 1</option> 
 
    <option value="2">Theme 2</option> 
 
</select>

來源

2016-12-28 23:22:14 ochi

Downvoted，因爲它根本不回答問題。 – Ced

@等待！你是否說我的回答沒有解決OP需要做主題？ - 我不確定我會同意你的意見。僅僅因爲我以廣泛支持的方式回答（而不是使用有限的瀏覽器支持方法），請閱讀：如何回答（https://stackoverflow.com/help/how-to-answer） - >答案可以是「不要這樣做」，但「試試這個」**聳聳肩膀** – ochi

改變了我的投票 – Ced

您可以簡單地使用任意設置CSS屬性的標準方式：setProperty

document.body.style.setProperty('--background-color', 'blue');

body { 
 
    --background-color: red; 
 
    background-color: var(--background-color); 
 
}

來源

2016-12-28 23:27:02 Oriol

如果您正在使用:root：

:root { 
    --somevar: black; 
}

這將是documentElement。

document.documentElement.style.setProperty('--somevar', 'green');

來源

2017-11-08 06:08:03 Blauhirn

如何使用JS編輯CSS變量？

回答

相關問題