所以我試圖獲取用戶輸入并將其作為整個站點的 CSS 變數，但它只為我提供了默認值（顏色選擇器的）。我在許多論壇上查找了與 JS 和 HTML 相關的錯誤，但沒有運氣。如果由于我已經設定的 HTML 的布局而不必將它們轉換為表單，那也將是非常幸運的。
Javascript
var changeclrbtn = document.getElementById('main-colorbtn');
var maincolore = document.getElementById('main-colorbox').value
changeclrbtn.onclick = function() {maincolorset()};
function maincolorset() {
document.documentElement.style.setProperty('--main-color', maincolore );
}
HTML
<div>Color Theme</div>
<div>
<input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8">
<input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()">
</div>
CSS
:root {
--main-color: #499ae8;
}
uj5u.com熱心網友回復：
你只需要移動這一行：
var maincolore = document.getElementById('main-colorbox').value
在你的函式里面。
現在您只maincolore在第一個頁面加載時設定變數，而不是在您單擊按鈕時。
var changeclrbtn = document.getElementById('main-colorbtn');
changeclrbtn.onclick = function() {maincolorset()};
function maincolorset() {
var maincolore = document.getElementById('main-colorbox').value;
document.documentElement.style.setProperty('--main-color', maincolore );
}:root {
--main-color: #499ae8;
}
body {
background: var(--main-color);
}<div>Color Theme</div>
<div>
<input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8">
<input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/482658.html
標籤：javascript html jQuery css