lttxzmj
思路:
- 首先定义 CSS 变量,然后在页面样式中对页面变量进行关联
- 使用 JS 实时获取变量的值,并更新 CSS 属性的值,实时改变页面的效果
知识点
CSS 3
1. CSS 变量
相关教程:MDN | CSS 变量教程 | 深入学习 CSS 自定义属性
2. filter
CSS滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。
JS
1. forEach
forEach()
方法对数组的每个元素执行一次提供的函数。
2. dataset
| 使用数据属性
HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。
即:可以通过 dataset
读取到数据
语法
string = element.dataset.camelCasedName;
element.dataset.camelCasedName = string;
3. 监听 mousemove
和 change
事件
mousemove
事件可以在该滑块的值变化时实时改变 CSS 全局变量change
事件是因为color
的改变依赖于用户提交颜色的值
4. document.documentElement
document.documentElement
表示文档的根元素,对于HTML文档来说就是