JavaScript30 - 3.CSS Variables

❤️ javascript30是一系列的视频教程，旨在30天编写30个前端小项目。 这些项目不须要使用其余lib,不须要编译，不须要模板，回归最纯真的JavaScript；

🐶 🐶 🐶

🐚 这是这个系列的第三篇

• 1. Drum Kit
• 2.JS + CSS Clock
• 3.CSS Variables

项目代码同步更新在男同交友网

项目简介

学会使用CSS变量，经过进度条和颜色选择来控制变量的值触发JS事件，从而达到改变样式的效果

新知识点复习 🐶（附连接）

CSS

CSS Variables:

CSS 变量当前有两种形式：

• 变量，就是拥有合法标识符和合法的值。能够被使用在任意的地方。能够使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
• 自定义属性。这些属性使用--*where*的特殊格式做为名字。例如--example-variable: 20px;即便一个css声明语句。意思是将20px赋值给--example-varibale变量。

注意：在以前的标准中，自定义属性以var-做为前缀，后来才改为--前缀。Firefox 31和之后的版本遵循新标准
MDN的🌰：

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}复制代码

ISUX译我为css变量狂
引人瞩目的 CSS 变量（CSS Variable）

Can I Use ?

• :root

  :root 伪类匹配文档树的根元素。应用到HTML，:root 即表示为元素，除了优先级更高外，至关于html标签选择器

语法：

:root { 样式属性 }复制代码

使用 CSS变量 的时候，声明全局CSS变量时 :root 很是实用

结构性伪类选择器
:root | CSS属性参考

JS

• document.documentElement MDN -documentElement
• mousemove event 事件类型一览表-mousemove

代码实践 ✅

设置和使用变量:

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}
.hl {
  color: var(--base);
}
img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}
...复制代码

监听事件 😁，触发的时候改变变量值：

const selects = document.querySelectorAll('.content input');

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

selects.forEach(item => item.addEventListener('change', handleUpdate));
selects.forEach(item => item.addEventListener('mousemove', handleUpdate));复制代码

但愿你们也多联系一下，虽然看起来很简单，可是天天花一点时间巩固一下基础也不错 ( ⊙ o ⊙ )！