Day03 - CSS 变量

dunizb 发布于2019-08-20 18:09 / 2097人阅读

摘要：变量作者简介是推出的一个天挑战。这是一个的新特性，和目前都还不支持。命名写法是变量名，在引用这个变量时写法是变量名。如何用改变属性值在中即代表文档根元素。

Day03 - CSS 变量

作者：©liyuechun
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 3 篇。完整指南在从零到壹全栈部落。

实现效果

用 JavaScript 和 CSS3 实现拖动滑块时，实时调整图片的内边距、模糊度、背景颜色，同时标题中 JS 两字的颜色也随图片背景颜色而变化。

涉及特性

:root

var(--xxx)：CSS 变量（CSS Variables）

filter: blur()

事件 change、mousemove

HTML源码

  Update CSS Variables with JS

  
    Spacing:
    

    Blur:
    

    Base Color
    
  


  
    {spacing:#ffc600}
    {blur:10px}
    {base:10px}

CSS源码

JS源码

过程指南 CSS 部分准备

声明全局（:root）的 CSS 变量

将变量应用到页面中对应元素

处理标题的 CSS 值

JS 实时更新 CSS 值

获取页面中 input 元素

给每个 input 添加监听事件，使其在值变动，触发更新操作

同 2 ，添加鼠标滑过时的事件监听

编写处理更新操作的方法

获取参数值后缀

获取参数名（blur、spacing、color）

获取参数值（12px、#efefef）

赋值给对应的 CSS 变量

基础知识

NodeList 和 Array 的区别

可以打开 proto 查看它的方法，其中有 forEach()、item()、keys() 等。而 Array 的 prototype 中有 map()、pop() 等数组才有的方法。

HTML5 中的自定义数据属性 dataset

HTML5 中可以为元素添加非标准的自定义属性，只需要加上 data- 前缀，可以随便添加和命名。添加之后，可以通过元素的 dataset 属性来访问这些值，dataset 的值是 DOMStringMap 的一个实例化对象，其中包含之前所设定的自定义属性的“名-值”对。

CSS variable

这是一个 CSS3 的新特性，IE 和 Edge 目前都还不支持。命名写法是 --变量名，在引用这个变量时写法是 var(--变量名)。具体实例见下一条代码。

:root 伪类

这个伪元素匹配的是文档的根元素，也就是标签。

所以常用于声明全局的 CSS 变量：

:root {
  --color: #fff;
}

在使用时：

img {
  background: var(--base);
}

CSS 滤镜 filter

CSS 的滤镜提供了一些图形特效，比如高斯模糊、锐化、变色等。它带有一些预设的函数，在使用时加上参数调用这些函数即可。在 Chrome、Firefox 中都支持。

解决难点

如何处理参数值（一个有 px 、另一个没有）

运用 dataset 储存后缀，有 px 后缀的标签中设置：

JS 中通过 dataset.sizing 来获取后缀值：

const suffix = this.dataset.sizing || "";

此时 suffix 获取到的值，针对颜色为空，而针对长度类的则为 "px"。

如何用 JavaScript 改变 CSS 属性值？

在 JavaScript 中 document.documentElement 即代表文档根元素。所以要改变全局的 CSS 变量，可以这样写：

document.documentElement.style.setProperty("--base", "#fff");

源码下载

Github Source Code

社群品牌：从零到壹全栈部落
定位：寻找共好，共同学习，持续输出全栈技术社群
业界荣誉：IT界的逻辑思维
文化：输出是最好的学习方式
官方公众号：全栈部落
社群发起人：春哥(从零到壹创始人，交流微信：liyc1215)
技术交流社区：全栈部落BBS
全栈部落完整系列教程：全栈部落完整电子书学习笔记

关注全栈部落官方公众号，每晚十点接收系列原创技术推送

云服务器 GPU云服务器服务器03还是08 服务器03和08 VoLLcloudh&amp03 rds035l03

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84125.html

Day03 - CSS 变量

摘要：变量作者简介是推出的一个天挑战。这是一个的新特性，和目前都还不支持。命名写法是变量名，在引用这个变量时写法是变量名。如何用改变属性值在中即代表文档根元素。所以要改变全局的变量，可以这样写源码下载扫码申请加入全栈部落 Day03 - CSS 变量作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、...

Allen 2019-08-20 17:48 评论0 收藏0
html/css day03

摘要：表单元素单行文本框密码框单选按钮复选按钮附件提交按钮拓展搜索框，日期框，数字框，框的属性参数的不能缺省参数的按钮的时候不能缺省提示语用在单选按钮和复选按钮中表示默认选中用在下拉菜单中表示默认选中注意和可以为单值属性下拉菜单山西江西甘肃甘肃中表单元素 1. input 单行文本框密码框 ...

Binguner 2019-08-02 15:41 评论0 收藏0
html/css day03

摘要：表单元素单行文本框密码框单选按钮复选按钮附件提交按钮拓展搜索框，日期框，数字框，框的属性参数的不能缺省参数的按钮的时候不能缺省提示语用在单选按钮和复选按钮中表示默认选中用在下拉菜单中表示默认选中注意和可以为单值属性下拉菜单山西江西甘肃甘肃中表单元素 1. input 单行文本框密码框 ...

haitiancoder 2019-08-30 15:44 评论0 收藏0