JavaScript 30 - 3 学习笔记

2018-06-24 00:08:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

今天学习的是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的变量,并且对其进行修改。

 

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于原型继承的一些问题

下一篇:vue组件知识总结