Day03 - CSS 变量

简介:

Day03 - CSS 变量

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

实现效果

liyuechun

用 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. 获取参数值后缀
    • 获取参数名(blur、spacing、color)
    • 获取参数值(12px、#efefef)
    • 赋值给对应的 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
  • 「区块链部落」官方公众号

相关文章
|
6月前
|
前端开发 开发者
CSS变量,也被称为CSS自定义属性或级联变量
【4月更文挑战第7天】CSS变量,也被称为CSS自定义属性或级联变量
51 3
|
15天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
15天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
15天前
|
前端开发 JavaScript
如何在 CSS 变量中使用函数?
【10月更文挑战第28天】虽然CSS变量本身不能像传统编程语言中的函数那样直接进行复杂的运算和逻辑处理,但通过CSS预处理器、`calc()` 函数以及与JavaScript的结合,可以在很大程度上实现类似函数的功能,提高CSS样式的灵活性和可维护性,满足各种不同的页面设计和交互需求。
|
15天前
|
前端开发 开发者 容器
CSS 变量的作用域是什么?
【10月更文挑战第28天】理解CSS变量的作用域规则对于有效地使用CSS变量来组织和管理页面样式非常重要。通过合理地利用全局作用域和局部作用域,以及掌握变量的覆盖和继承规则,可以创建更具可维护性、灵活性和可扩展性的CSS样式表,实现各种复杂的页面设计和样式需求。
|
15天前
|
前端开发 JavaScript UED
|
15天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
2月前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
42 0
|
5月前
|
前端开发 JavaScript 开发者
CSS进阶-CSS变量
【6月更文挑战第13天】本文介绍了CSS变量(Custom Properties)的基本概念、应用场景和常见问题。通过声明与使用示例,展示了如何定义和引用变量。文章讨论了兼容性、作用域、错误引用及JavaScript交互等易错点,并提供了相应的解决方案。此外,还分享了实践技巧,如模块化色彩系统、响应式设计和动画制作。通过学习,开发者能更好地利用CSS变量提高样式灵活性和维护性。
64 3
|
4月前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
55 0