~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
作者：宁芳
撰写时间：2019-2-11
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面我们使用JS更新CSS变量，下面我看到的是效果演示。首先可以通过上面滚动条改变图片的内边距和模糊值，后边一个颜色条可通过点击，打开一个颜色板，然后选择颜色就可以改变边框和字体颜色。
拉动滚动条，改变内边距和照片模糊值
点击打开颜色板
改变边框和字体颜色
要实现这个效果首先在css样式上面设置一个root 伪类,这个伪元素匹配的是文档的根元素，也就是<html>标签。所以常用于声明全局的CSS变量，然后将变量应用到页面中对应元素
CSS部分
<style>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
width: 600px;
height: 400px;
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
/*处理标题的CSS值*/
.hl {
color: var(--base);
}
body {
text-align: center;
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 30px;
}
.controls {
margin-bottom: 50px;
}
input {
width: 100px;
}
.result {
display: flex;
flex-direction: row;
justify-content: center;
color: var(--base);
}
.showText {
margin: 0px 25px 50px 25px;
}
</style>
在html部分，首先我们添加按钮。然后设置按钮的属性“type="range"”再给按钮一个默认值，在HTML5中可以为元素添加非标准的自定义属性，只需要加上data-前缀，可以随便添加和命名。添加之后，可以通过元素的dataset属性来访问这些值。
HTML部分
<body>
<h2><span class='hl'>使用JS更新CSS变量</span></h2>
<div class="controls">
<label for="spacing">照片内边距:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">照片模糊:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">改变颜色</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>
<div class="result">
<div class="showText">{内边距:<label id="label_spacing">10px</label>}</div>
<div class="showText">{模糊范围:<label id="label_blur">10px</label>}</div>
<div class="showText">{颜色值:<label id="label_base">#ffc600</label>}</div>
</div>
<img src="~/Content/img5.jpg" />
在script部分，首先通过dataset.sizing 来获取后缀值，此时 suffix 获取到的值，针对颜色为空，而针对长度类的则为 'px'，在 JavaScript 中 document.documentElement 即代表文档根元素。所以用它来改变全局的 CSS 变量：，给input添加监听事件，使其在值变动，触发更新操作，给input添加监听事件，添加鼠标滑过时的事件监听。出发监听事件后，将改变的值传到CSS部分，从而发生改变
JS部分
<script>
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
document.getElementById(`label_${this.name}`).innerText = this.value + suffix;
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
</script>