Question

我目前有3个输入颜色选择器。

<input type="color" name="seconds-hand" value="#0c82cc" />
<input type="color" name="minutes-hand" value="#0c82cc" />
<input type="color" name="hours-hand" value="#0c82cc" />

然后我写了一些javascript来找到其中的每一个并更新标题中的样式：

const input = document.querySelectorAll('input');
const sheets = document.styleSheets;
const sheet = document.styleSheets[0];

function handleUpdate(){
    const element = document.getElementsByClassName(this.name);
    sheet.insertRule(`.${this.name} { background-color: ${this.value} }`);
    console.log(`.${this.name} { background-color: ${this.value} }`);
}
input.forEach(input => input.addEventListener('change', handleUpdate));
input.forEach(input => input.addEventListener('mousemovement', handleUpdate));

控制台日志返回正确的样式以添加到样式表，但没有添加任何内容。我使用的是不正确的js .inserRule 吗？我无法弄清楚为什么它没有改变。

任何帮助都会很棒。

Answer 1

当脚本运行时，您尝试查找的元素不在DOM中。要解决此问题，您可以在window.onload事件或DOMContentLoaded（文档就绪）

上执行代码

＆＃13;

window.onload = function(){
const input = document.querySelectorAll('input');
const sheets = document.styleSheets;
const sheet = document.styleSheets[0];

function handleUpdate(){
    const element = document.getElementsByClassName(this.name);
    sheet.insertRule(`.${this.name} { background-color: ${this.value} }`);
    console.log(`.${this.name} { background-color: ${this.value} }`);
}
input.forEach(input => input.addEventListener('change', handleUpdate));
input.forEach(input => input.addEventListener('mousemovement', handleUpdate));
}

＆＃13;

<input type="color" class="seconds-hand" name="seconds-hand" value="#0c82cc" />
<input type="color" class="minutes-hand" name="minutes-hand" value="#0c82cc" />
<input type="color" class="hours-hand" name="hours-hand" value="#0c82cc" />

＆＃13;

香草javascript - insertRule CSS无法正常工作

1 个答案: