在 Javascript30 中执行任务时,我注意到
document.querySelectorAll('input')[0].style.setProperty
并document.documentElement.style.setProperty
输出相同的对象,但当我尝试设置属性时,前者不起作用。
我想知道为什么前者不起作用而后者起作用。
我做了一个 console.log 来查看两行代码的输出。
let controller = document.querySelectorAll(".controller input");
//console.log(document.querySelectorAll('input')[0].style.setProperty);
//console.log(document.documentElement.style.setProperty);
function handleChange() {
const suffix = this.dataset.sizing || "";
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
/*document.querySelectorAll('input').forEach((input) => {
input.style.setProperty(`--${this.name}`, this.value + suffix);
});*/
}
controller.forEach(input => input.addEventListener('change', handleChange));
controller.forEach(input => input.addEventListener('mousemove', handleChange));
body {
text-align: center;
color: white;
background-color: rgb(150, 200, 140);
}
:root {
--blur: 10px;
--spacing: 10px;
--color: red;
}
img {
padding: var(--spacing);
filter: blur(var(--blur));
background: var(--color);
}
<header>Playing with CSS variables and JS</header>
<div class="controller">
<label for="spacing">Spacing: </label>
<input type="range" min="10" max="200" id="spacing" name="spacing" value="10" data-sizing="px">
<label for="blur">Blur: </label>
<input type="range" min="0" max="30" id="blur" name="blur" value="10" data-sizing="px">
<label for="color">Base Color</label>
<input type="color" id="color" name="color">
</div>
<img src="https://res.cloudinary.com/dzwmmrwr2/image/upload/v1542708495/6_kmfxtt.png" alt="image" width="300" height="350">
问题是您正在使用 querySelector 选择“输入元素”,而不是像您那样选择“html-元素” document.documentElement
使用document.querySelectorAll('html')
而不是document.querySelectorAll('input')
解决您的问题:
// Code goes here
let controller = document.querySelectorAll(".controller input");
function handleChange() {
const suffix = this.dataset.sizing || "";
document.querySelectorAll('html').forEach((input) => {
input.style.setProperty(`--${this.name}`, this.value + suffix);
});
}
controller.forEach(input => input.addEventListener('change', handleChange));
controller.forEach(input => input.addEventListener('mousemove', handleChange));
body {
text-align: center;
color: white;
background-color: rgb(150, 200, 140);
}
:root {
--blur: 10px;
--spacing: 10px;
--color: red;
}
img {
padding: var(--spacing);
filter: blur(var(--blur));
background: var(--color);
}
<header>Playing with CSS variables and JS</header>
<div class="controller">
<label for="spacing">Spacing: </label>
<input type="range" min="10" max="200" id="spacing" name="spacing" value="10" data-sizing="px">
<label for="blur">Blur: </label>
<input type="range" min="0" max="30" id="blur" name="blur" value="10" data-sizing="px">
<label for="color">Base Color</label>
<input type="color" id="color" name="color">
</div>
<img src="https://res.cloudinary.com/dzwmmrwr2/image/upload/v1542708495/6_kmfxtt.png" alt="image" width="300" height="350">
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句