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

 

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