JavaScript 30 - 3 学习笔记

今天学习的是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的使用方法。

COLOR和 RANGE

我们分别为三个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 a DOMString representing the CSS property name to be modified.

value Optional is a DOMString containing the new property value. If not specified, treated as the empty string.
Note: value must not contain "!important" -- that should be set using the priority parameter.

priority Optional is a DOMString 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的变量，并且对其进行修改。

这些就是本次课程我学到的新内容，哈哈。

巴特西

JavaScript 30 - 3 学习笔记

CSS变量

基本用法

最新文章

热门文章