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等方法去获取.// 此处为获取当前的长度单位,例如pxconst 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以上就支持了。

转载于:https://www.cnblogs.com/wangxi01/p/10641708.html

JavaScipt30(第三个案例)（主要知识点：css变量）相关推荐

课堂案例之用CSS画红绿红三个盒子
课堂案例之用CSS画红绿红三个盒子 1 html+css代码 2 界面实现 1 html+css代码 <!DOCTYPE html> <html lang="en" ...
三个案例带你看懂LayoutInflater中inflate方法两个参数和三个参数的区别
本文转载自[http://blog.csdn.net/u012702547/article/details/52628453] 关于inflate参数问题,我想很多人多多少少都了解一点,网上也有很多关 ...
python回调接口_三个案例带你了解python回调函数
原标题:三个案例带你了解python回调函数回调函数: 把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用 ...
三个案例看Nginx配置安全
之前在Sec-News中推荐了一个开源程序 https://github.com/yandex/gixy,作用是来检测Nginx配置文件中存在的问题.正好Pwnhub上周的比赛也出现了一道题,包含由 ...
jQuery系列第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
三年级下册计算机知识点,苏教版三年级信息技术下册知识点.doc
三年级下册信息技术知识点: 常见的音乐软有QQ音乐.百度音乐.酷狗音乐等,这些软件都提供了搜索功能. 从网上下载的音乐格式有很多,如MP3.WAV.WMA等. 下载音乐的方法:①启动音乐软件,在窗口的 ...
Python爬虫何如抓包？这三个案例手把手教会你，非常详细...
文章目录哔,老年卡某牙直播抓包某博抓包某手短视频抓包哔,老年卡很多小伙伴总是问我,数据来源怎么找啊,怎么抓包,其实很简单,多操作几遍就记住了. 今天咱们通过三个案例来展示一下某牙直播抓包 ...
大数据运用于旅游业的三个案例
浙江大数据交易中心是浙江省唯一经省政府批准建立的交易数据资产的创新型交易场所,致力于建立一个具有公信力.开放.客观.独立的第三方数据交易平台.2016国际旅游互联网大会上,浙江大数据交易中心副总经理来 ...
机器学习（西瓜书）——第三章线性模型（知识点思维导图）
机器学习(西瓜书)--第三章线性模型(知识点思维导图) 这章难点在于线性判别分析和对数几率回归的理解与实践,这里只是给大家梳理了一下思路. 大家在学习的时候可以利用sklearn中的线性模型来进行尝试 ...

JavaScipt30(第三个案例)（主要知识点：css变量）

JavaScipt30(第三个案例)（主要知识点：css变量）相关推荐

最新文章

热门文章