今天学习的是JavaScript 30-3 ---css Variables
实现的效果如下图所示。
废话不多,我们直接来看代码。
html:
<h1>大家好,这个一个<span class="h1">标题</span></h1> <div class="controls"> <label for="spacing">背景后面的空间:</label> <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"> <label for="blur">虚化程度:</label> <input type="range" name="blur" min="0" max="25" value="3" data-sizing="px"> <label for="base">背景颜色:</label> <input type="color" name="base" value="#dcaddc"> </div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504347299000&di=436a85e236633c3eced53b98620e2992&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_5_3163712707D1742949080_23.jpg">
本次使用了 input标签的 range 和 color ,两个小白接触不多的type吧:
两个有意思的type。附带两个链接,大家可以去详细阅读以下这两个type的使用方法。
我们分别为 三个input 设置了他们的初始value 为两个range 设置了 min 和max 的值,并且增加了data-sizing。
这个data-sizing 是为了js代码而特别增加的。
接下来我们来看看css。
:root{ --base:#dca; --spacing:10px; --blur:3px; } img{ padding: var(--spacing); background-color: var(--base); filter: blur(var(--blur)); } .h1{ color: var(--base); background-color: rgb(22,33,44); }
css里的代码很少,但是这次课程用到了css的新东西!
CSS变量
CSS 变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名,并使用特定的 var() 来访问。(比如 color: var(--main-color);)。
我们使用了:root 选择器,来定义了三个css变量。 css变量的定义方法是:
element { --main-bg-color: brown; }
使用的方法是
element { background-color: var(--main-bg-color); }
因此我们定义了三个变量:--base ,--spacing , --blur。
有了变量之后,我们只需要找到此变量,然后对他进行修改,就可以修改所有css中用到这个变量的地方啦!
js代码展示了如何修改他们的方法:
const inputs = document.querySelectorAll('.controls input'); const h = document.querySelector('.h1'); function handleUpdate(){ const suffix = this.dataset.sizing || ''; document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix); } inputs.forEach(input => input.addEventListener('change',handleUpdate)); inputs.forEach(input => input.addEventListener('mousemove',handleUpdate));
const 和 字符串模版的使用大家可以去看我的第一篇文章 JavaScript30-1,
顺便补充一下第一篇文章没有写清楚的箭头函数: =>
在上面这段代码中,我们可以看到
inputs.forEach(input => input.addEventListener('change',handleUpdate));
其实这段代码就等同于:
inputs.forEach( function(input){ input.addEventListener('change',handleUpdate); } );
也就是箭头函数的使用方法:
基本用法
ES6 允许使用“箭头”(
=>
)定义函数。var f = v => v;上面的箭头函数等同于:
var f = function(v) { return v; };
接下来就让我们来看看这个效果实现的核心原理吧:
function handleUpdate(){ const suffix = this.dataset.sizing || ''; document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix); }
我们的handleUpdate() 是在input 改变的时候执行的,也就是指,this指向的其实就是我们鼠标所选中的那个控件,所以我们可以直接使用dataset.sizing 来获取到 data-sizing 的值。
当然 ,还有其他的方法可以获取到data-sizing的值。 例如 getAttribute("data-sizing"); 也可以获取到 data-sizing的值。
这里还使用了另外一个方法: setProperty()
style.setProperty(propertyName, value, priority);
它接受三个参数:
propertyName
is aDOMString
representing the CSS property name to be modified.value
Optional is aDOMString
containing the new property value. If not specified, treated as the empty string.
- Note:
value
must not contain"!important"
-- that should be set using thepriority
parameter.priority
Optional is aDOMString
allowing the "important" CSS priority to be set. If not specified, treated as the empty string.
这是我在mdn上查到的,
propertyName 就是指 css 样式的名字,他使用的是原生css样式名字,并不需要对css样式名进行转化 例如 background-color 不需要转化为 backgroundColor。
value则是改变后的值。
priority 一般不写,这是用来设置样式为important 的..
因为我们要找到的是css的变量,所以采用这种方法可以直接找到css的变量,并且对其进行修改。
这些就是本次课程我学到的新内容,哈哈。