zoukankan      html  css  js  c++  java
  • JavaScipt30(第三个案例)(主要知识点:css变量)

    承接上文 https://www.cnblogs.com/wangxi01/p/10641210.html,下面是第三个案例:

    附上项目链接: https://github.com/wesbos/JavaScript30

    主要要实现的是移动上面的input range,改变下面图标的样式。以下为我注释后的源码:

    /* :root选择器,等同于html */
    :root {
        /* css变量 */
        /* 作用域:可以在多个选择器内声明。读取的时候,优先级最高的声明生效 */
        /* 可使用@support命令进行检测是否支持css变量 */
        @supports ( (--base: 0)) {
          /* supported */
        }
        @supports ( not (--base: 0)) {
          /* not supported */
        }
        --base: #ffc600;
        --spacing: 10px;
        --blur: 10px;
    }
    
    img {
        padding: var(--spacing);
        background: var(--base);
        filter: blur(var(--blur));
    }
    
    .hl {
        color: var(--base);
    }
    const inputs = document.querySelectorAll('.controls input');
    
    function handleUpdate() {
        // dataset,DOM对象中的属性对象,可以获取data-开头的属性,如不兼容的地方,可以使用getAttribute等方法去获取.
        // 此处为获取当前的长度单位,例如px
        const suffix = this.dataset.sizing || '';
        // 改变根元素的css变量的值,结合元素样式使用了css变量的情况,从而达到改变页面上样式变化的效果
        // 不同于传统操作dom去改变样式的方式,很巧妙
        // js操作css变量三种写法
        // 设置变量: document.body.style.setProperty('--primary', '#7F583F');
        // 读取变量: document.body.style.getPropertyValue('--primary').trim();
        // 删除变量: document.body.style.removeProperty('--primary');
        // 这样,可以将监听事件的信息存入css变量,也可将对css无效的一些信息存入css变量, css变量提供了javaScript与css通信的一种途径。
        document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }
    
    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    // 不清楚为什么要监听mousemove事件,我去掉了发现效果没有变化.
    // inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

    备注:我网上搜了下css变量17年已经出现,可惜我到现在才在这个案例中知道,之前都未曾用过,感觉这个还是很不错的,有很多地方其实可以尝试使用的,兼容性也比较好,ie8以上就支持了。

    好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。
  • 相关阅读:
    洛谷 P1194 飞扬的小鸟 题解
    洛谷 P1197 星球大战 题解
    洛谷 P1879 玉米田Corn Fields 题解
    洛谷 P2796 Facer的程序 题解
    洛谷 P2398 GCD SUM 题解
    洛谷 P2051 中国象棋 题解
    洛谷 P1472 奶牛家谱 Cow Pedigrees 题解
    洛谷 P1004 方格取数 题解
    洛谷 P2331 最大子矩阵 题解
    洛谷 P1073 最优贸易 题解
  • 原文地址:https://www.cnblogs.com/wangxi01/p/10641708.html
Copyright © 2011-2022 走看看