zoukankan      html  css  js  c++  java
  • JavaScript 30

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

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

  • 相关阅读:
    [转] 常用的sql server规范
    <深入理解JavaScript>学习笔记(2)_揭秘命名函数表达式
    SQL Server 字段类型 decimal(18,6)小数点前是几位?记一次数据库SP的BUG处理
    <深入理解JavaScript>学习笔记(1)_编写高质量JavaScript代码的基本要点
    [转] SQL函数说明大全
    jquery 获取 tagName(JQuery如何得到tagName?)
    [转] .NET出现频率非常高的笔试题
    [转] SQL Server游标的使用
    jquery datatables 学习笔记
    [转] 如何让代码可测试化(C#)
  • 原文地址:https://www.cnblogs.com/Let7/p/7474497.html
Copyright © 2011-2022 走看看