Day03 - CSS 变量

Day03 - CSS 变量

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

实现效果

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

涉及特性

  • :root
  • var(--xxx):CSS 变量(CSS Variables
  • filter: blur()
  • 事件 changemousemove

HTML源码

  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

  <div class="result">
    <div class="showText">{spacing:<label id="label_spacing">#ffc600</label>}</div>
    <div class="showText">{blur:<label id="label_blur">10px</label>}</div>
    <div class="showText">{base:<label id="label_base">10px</label>}</div>
  </div>

  <img src="http://f.hiphotos.baidu.com/lvpics/h=800/sign=b346032cbe389b5027ffed52b534e5f1/960a304e251f95ca545f8b84ce177f3e6709525d.jpg">

CSS源码

  <style>
     :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }

    img {

      width: 600px;
      height: 400px;
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl {
      color: var(--base);
    }
    /*
      misc styles, nothing to do with CSS variables
    */

    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 30px;
    }

    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }

    .result {
      display: flex;
      flex-direction: row;
      justify-content: center;
      color: var(--base);
    }

    .showText {
      margin: 0px 25px 50px 25px;
    }
  </style>

JS源码

  <script>
    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
      document.getElementById(`label_${this.name}`).innerText = this.value + suffix;
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
  </script>

过程指南

CSS 部分准备

  1. 声明全局(:root)的 CSS 变量
  2. 将变量应用到页面中对应元素 <img>
  3. 处理标题的 CSS 值

JS 实时更新 CSS 值

  1. 获取页面中 input 元素
  2. 给每个 input 添加监听事件,使其在值变动,触发更新操作
  3. 同 2 ,添加鼠标滑过时的事件监听
  4. 编写处理更新操作的方法
    1. 获取参数值后缀
    2. 获取参数名(blur、spacing、color)
    3. 获取参数值(12px、#efefef)
    4. 赋值给对应的 CSS 变量

基础知识

  1. NodeList 和 Array 的区别

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

  2. HTML5 中的自定义数据属性 dataset

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

  3. CSS variable

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

  4. :root 伪类

    这个伪元素匹配的是文档的根元素,也就是 <html> 标签。

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

    :root {
      --color: #fff;
    }
    

    在使用时:

    img {
      background: var(--base);
    }
    
  5. CSS 滤镜 filter

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

解决难点

  1. 如何处理参数值(一个有 px 、另一个没有)

    运用 dataset 储存后缀,有 px 后缀的标签中设置 <input data-sizing: px>

    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
    <input type="color" name="base" value="#8aa8af">
    

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

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

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

  2. 如何用 JavaScript 改变 CSS 属性值?

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

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

源码下载

Github Source Code

春哥简介

简介: 资深讲师,全栈工程师;区块链、高可用架构技术爱好者。
个人博客:http://liyuechun.org
新浪微博:黎跃春-追时间的人
github:http://github.com/liyuechun

技术交流

  • 区块链技术交流QQ群:348924182
  • 「区块链部落」官方公众号

时间: 2017-08-29

Day03 - CSS 变量的相关文章

CSS 变量的条件

本文讲的是CSS 变量的条件, 我将从这里开始:不是这(这是一个名为" CSS 的条件规则模块",但不要期望着它能包含 CSS 的变量 -- 它涵盖了一些 @规则(at-rules).甚至有一个关于 @when/@else @规则的提议,再次,与变量没有什么共同点.) 规范使用 CSS 变量 的条件.我认为这是在规范里的一个重大缺陷.因为变量已经提供了许多以前无法实现的东西.没有条件是真的令人沮丧,因为它们可能有很多用途. 但如果我们现在需要那些虚构的条件语句用在 CSS 变量上呢?好

引人瞩目的 CSS 变量(CSS Variable)

这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量. 一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器. 但是新的草案发布之后,直接在 CSS 中定义和使用变量已经不再是幻想了,像下面这样,看个简单的例子: // 声明一个变量: :root{ --bgColor:#000; }

css的变量和继承的学习笔记

朋友,百姓网前端架构师css魔法的<css揭秘>,已经出版发行,并赠送了我一本.看了一下这本书,确实有很多css技巧.让你会有蛮大的收获,在这里帮他宣传一下!今天所说的案例呢,也是部分借鉴这本书的.今天和大家聊聊css变量和继承! 有人会说,css怎么会有变量和继承?你是说的css处理器吧! 不是,我说的是纯css,其实,css也在努力融入各种预处理器的特性和写法,甚至有些属性比预处理器更加强大,例如: 闲话少说,我们还是切入正题吧! css变量 其实我说的变量,并非css处理器中的自定义变量

CSS currentColor 变量的使用

CSS中存在一个神秘的变量,少有人知自然也不怎么为人所用.它就是crrentColor变量(或者说是CSS关键字,但我觉得称为变量好理解些). 初识 它是何物?具有怎样的功效?它从哪里来?带着这些疑问我们继续. 下面是来自MDN的解释: currentColor代表了当前元素被应用上的color颜色值. 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上. 你这可以这么理解,CSS里你可以在任何需要写颜色的地方使用currentColor这个变量,这个变量的值是当前元素的col

CSS中行高line-height属性的一些使用技巧

  先来回顾一下line-height的基础知识: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: 设置元素中行的高度. 值: normal:默认行高,一般为1到1.2; 实数:实数值,缩放因子; 长度:合法的长度值,可为负数; 百分比:百分比取值基于元素的字体尺寸. 初始值: normal 继承性: 继承 适用于: 所有元素 媒体: 视觉 计算值: 长度和百分比值为绝对值;其他同指定值. CSS

【译】使用 currentColor 属性写出更好的 CSS 代码

本文讲的是[译]使用 currentColor 属性写出更好的 CSS 代码, 总有一些极其强大的 CSS 属性在目前已经有了很好的浏览器支持,但却很少被开发者使用. currentColor 就是这样的属性之一. MDN 把 currentColor 定义为: currentColor 代表了当前元素被应用上的 color 颜色值.它允许让继承自属性或子元素属性的 color 属性为默认值而不再继承. 在本文中,我们将通过一些有趣的方式来概述如何使用 CSS currentColor 这一关键

2017 年要去学的 3 个 CSS 新属性

本文讲的是2017 年要去学的 3 个 CSS 新属性, 1. 特性查询(Feature Queries) 不久前,我写过一篇关于特性查询的文章 -- <一个我十分期待的CSS特性 - the one CSS feature I really want>.如今果然出现了.除了 IE浏览器之外,所有主流浏览器(包括 Opera Mini)均已支持特性查询. 特性查询采用 @supports 规则,它使得我们可以将 CSS 代码包裹一个条件块中.只有当浏览器的用户代理(user agent)支持某

一封写给 CSS 的情书

本文讲的是一封写给 CSS 的情书, 原文地址:A Love Letter to CSS 原文作者:TJ VanToll 译文出自:掘金翻译计划 译者:reid3290 校对者:changkun,CACppuccino https://user-gold-cdn.xitu.io/2017/6/23/73b12f2b44aa17838547e30dd56f8cab 当我和同事们谈及我对 CSS 的热爱有增无减时,他们一个个盯着我看,好像我做了个不幸的人生决定一样. "TJ,来坐这,我们来聊聊你小时

外文翻译:CSS 期望表 (Wishlist)

中介交易 SEO诊断 淘宝客 云主机 技术大厅 著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查,请15名顶尖的 Web 设计师对 CSS 提出自己的期望,15名设计师包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke. 调查结果显示,最被期待的 CSS 功能是 CSS 圆角,其它期待的功能包括跨浏览器渐变与阴影,类似 Photoshop 的层融合