从表单元素中抓取颜色似乎不适用于 CSS 变量

Question

所以我试图获取用户输入并将其作为整个站点的 CSS 变量，但它只为我提供了（颜色选择器的）默认值。我在许多论坛上查找了 JS 和 HTML 相关的错误，但没有成功。如果我不必因为我已经设置的 HTML.

的布局而将它们转换成表格，那也太幸运了

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 );
}

:root {
    --main-color: #499ae8;
}

<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>

Answer 1

你只需要移动这一行：

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>

从表单元素中抓取颜色似乎不适用于 CSS 变量

Grabbing color from form element doesn't seem to work for CSS Variable

javascript

html

jquery

css