按钮提交后如何刷新CSS？

Question

我在一个采用十六进制代码的 ejs 文件中有两个输入字段。当输入十六进制代码并单击提交按钮时，我将样式表中的变量设置为这些十六进制代码，并且背景渐变应该会改变。有没有一种方法可以在不进行重定向或刷新整个页面的情况下刷新样式表？可以只刷新背景渐变吗？

<script>
// fd is the form data
function setValue(fd) {
  let hexcode1 = fd.get('hexcode1');
  let hexcode2 = fd.get('hexcode2');

  r.style.setProperty('--color1', hexcode1);
  r.style.setProperty('--color2', hexcode2);
}
</script>

Answer 1

您可以使用 cookie 来存储十六进制代码，然后即使在页面刷新时也可以从 cookie 中获取它..

这里是 JavaScript 代码：

window.addEventListener('DOMContentLoaded', function() {
  var cookieValue = getCookie('backgroundColor'),
      btns = document.querySelectorAll('.color-btn');

  if (cookieValue) {
    setBackgroundColor(cookieValue);
  }
  
  Array.from(btns).forEach(function(btn) {
    btn.addEventListener('click', function() {
      var color = this.getAttribute('data-color');
      setBackgroundColor(color);
    });
  });
});

function setBackgroundColor(color) {
  document.body.style.backgroundColor = color;
  setCookie('backgroundColor', color);
}

function getCookie(name) {
  var cookies = document.cookie.split(';'),
      cookie = cookies.find(function(str) { return str.indexOf(name + '=') === 0; });
  if (cookie) {
    return cookie.split('=')[1];
  }
  return null;
}

function setCookie(name, value) {
  document.cookie = name + '=' + value;
}

CSS:

body { background: red; }
button { padding: 1em; }
[data-color="red"] { background: red; }
[data-color="blue"] { background: blue; }
[data-color="green"] { background: green; }

HTML:

<button class="color-btn" data-color="red"></button>
<button class="color-btn" data-color="blue"></button>
<button class="color-btn" data-color="green"></button>

Here is a JSFiddle link

请注意，此处用于存储 cookie 的代码会在页面关闭时被删除。
所以用户必须每次都改变它..
您可以通过添加此代码来防止这种情况，（这会保留一年，根据您的意愿更改）↓

var expiry = new Date();
expiry.setFullYear(expiry.getFullYear() + 1);
document.cookie = name + '=' + value + '; expires=' + expiry.toUTCString() + ';';

按钮提交后如何刷新CSS？

How to refresh CSS after button submit?

html

javascript

css

ejs