效果
首先是效果图，用户可以通过控制上面三个input改变图片的padding、blur、background-color属性;
image.png
image.png
实现方式
方式1
通过switch 获取改变样式种类分别改变
// 方式1
switch (this.id) {
case 'spacing':
document.querySelector("img").style.padding = this.value + 'px';
break;
case 'blur':
document.querySelector('img').style.filter = `blur(${this.value}px)`;
break;
case 'base':
document.querySelector('img').style.background = this.value;
break;
}
方式2
通过三元运算符对样式种类进行判断后改变
// 方式2
document.querySelector("img").style.setProperty(`--${this.id}`, this.value + (this.id === 'base' ? '' : 'px'));
方式3
通过div定义的data属性对样式种类进行判断后改变，当种类单位多样时，这种比较好，此例中只有px和无两种单位。
// 方式3
const suffix = this.dataset.sizing || '';
document.querySelector("img").style.setProperty(`--${this.id}`, this.value + suffix);
注意点
因为样式改变按钮有两种形式，一是background-color样式，选择之后改变 用change即可；二是range形式，需要通过边滑动边改变，需要使用mousemove，所以需要两个addEventListener。
inputs.forEach(input => {
input.addEventListener("change", changeHandle);
input.addEventListener("mousemove",changeHandle)
})
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
--base: #ffc600;
--spacing: 10px;
--blur: 0px;
}
body {
margin: 0;
background: cornflowerblue;
font-family: 'helvetica neue', sans-serif;
min-height: 100vh;
text-align: center;
}
.controls {
margin-bottom: 30px;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
</style>
</head>
<body>
<h2>Update CSS Variables with JS</h2>
<div class="controls">
<label for="spacing">Spacing:</label>
<input type="range" id ="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input type="range" id="blur" min="0" max="20" value="0" data-sizing="px">
<label for="base">Color:</label>
<input type="color" id="base" value="#ffc600">
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
<script>
;(function () {
const inputs = document.querySelectorAll('.controls input');
inputs.forEach(input => {
input.addEventListener("change", changeHandle);
input.addEventListener("mousemove",changeHandle);
})
function changeHandle() {
console.log(this.id, this.value)
// 方式1
// switch (this.id) {
// case 'spacing':
// document.querySelector("img").style.padding = this.value + 'px';
// break;
// case 'blur':
// document.querySelector('img').style.filter = `blur(${this.value}px)`;
// break;
// case 'base':
// document.querySelector('img').style.background = this.value;
// break;
// }
// 方式2
// document.querySelector("img").style.setProperty(`--${this.id}`, this.value + (this.id === 'base' ? '' : 'px'));
// 方式3
const suffix = this.dataset.sizing || '';
document.querySelector("img").style.setProperty(`--${this.id}`, this.value + suffix);
}
})()
</script>
</body>
</html>
