Day03 – CSS 变量
作者：©liyuechun
简介：JavaScript30 是 Wes Bos 推出的一个 30 天应战。项目免费供应了 30 个视频教程、30 个应战的肇端文档和 30 个应战处理方案源代码。目标是协助人们用纯 JavaScript 来写东西，不借助框架和库，也不应用编译器和援用。如今你看到的是这系列指南的第 3 篇。完全指南在 从零到壹全栈部落。
完成结果
用 JavaScript 和 CSS3 完成拖动滑块时，及时调解图片的内边距、隐约度、背景色彩，同时题目中 JS 两字的色彩也随图片背景色彩而变化。
触及特征
var(--xxx)：CSS 变量（CSS Variables）filter: blur()事宜
change、mousemove
HTML源码
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>
<div class="result">
<div class="showText">{spacing:<label id="label_spacing">#ffc600</label>}</div>
<div class="showText">{blur:<label id="label_blur">10px</label>}</div>
<div class="showText">{base:<label id="label_base">10px</label>}</div>
</div>
<img src="http://f.hiphotos.baidu.com/lvpics/h=800/sign=b346032cbe389b5027ffed52b534e5f1/960a304e251f95ca545f8b84ce177f3e6709525d.jpg">CSS源码
<style>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
width: 600px;
height: 400px;
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
/*
misc styles, nothing to do with CSS variables
*/
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>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>历程指南
CSS 部份预备
声明全局（
:root）的 CSS 变量将变量应用到页面中对应元素
<img>处置惩罚题目的 CSS 值
JS 及时更新 CSS 值
猎取页面中
input元素给每一个
input增加监听事宜，使其在值更改，触发更新操纵同 2 ，增加鼠标滑过期的事宜监听
编写处置惩罚更新操纵的要领
猎取参数值后缀
猎取参数名（blur、spacing、color）
猎取参数值（12px、#efefef）
赋值给对应的 CSS 变量
基础知识
NodeList 和 Array 的区分
能够翻开 proto 检察它的要领，个中有
forEach()、item()、keys()等。而 Array 的 prototype 中有map()、pop()等数组才有的要领。HTML5 中的自定义数据属性
datasetHTML5 中能够为元素增加非标准的自定义属性，只需要加上
data-前缀，能够随意增加和定名。增加以后，能够经由过程元素的dataset属性来访问这些值，dataset的值是 DOMStringMap 的一个实例化对象，个中包括之前所设定的自定义属性的“名-值”对。这是一个 CSS3 的新特征，IE 和 Edge 现在都还不支撑。定名写法是
--变量名，在援用这个变量时写法是var(--变量名)。详细实例见下一条代码。:root伪类这个伪元素婚配的是文档的根元素，也就是
<html>标签。所以常用于声明全局的 CSS 变量：
:root { --color: #fff; }在应用时：
img { background: var(--base); }CSS 滤镜 filter
CSS 的滤镜供应了一些图形殊效，比方高斯隐约、锐化、变色等。它带有一些预设的函数，在应用时加上参数挪用这些函数即可。在 Chrome、Firefox 中都支撑。
处理难点
怎样处置惩罚参数值（一个有 px 、另一个没有）
应用
dataset贮存后缀，有 px 后缀的标签中设置<input data-sizing: px>：<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px"> <input type="color" name="base" value="#8aa8af">JS 中经由过程
dataset.sizing来猎取后缀值：const suffix = this.dataset.sizing || '';此时 suffix 猎取到的值，针对色彩为空，而针对长度类的则为 ‘px’。
怎样用 JavaScript 转变 CSS 属性值？
在 JavaScript 中
document.documentElement即代表文档根元素。所以要转变全局的 CSS 变量，能够如许写：document.documentElement.style.setProperty('--base', '#fff');
源码下载
| 扫码申请加入全栈部落 |
|---|
