关于javascript:不会吧不会吧你还不知道原生CSS中可以使用变量了吧

Hello 大家好，我是此岸繁華🌸，一个想进大厂的大三学生，为了有一个残缺的前端常识体系，当初我要从头开始学习、梳理、总结。

编写不易转载请取得容许

写在后面

在 CSS 中应用变量并不是一个稀奇事，早在 2007 年 Sass 的诞生，就能够通过预处理的形式去解决变量，相继的又呈现了 Less 和 Stylus 预处理器。

原生 CSS 直到 CSS3 的推出，才呈现了 变量 （又称为 自定义属性）的概念，当初咱们就来学习一下。

根本用法

原生 CSS 定义变量，变量名须要应用两个减号 -- 开始，其值能够是任何无效的 CSS 值。定义 CSS 比那里的写法与一般 CSS 属性的写法是统一的。语法规定如下：

element {--main-text-color: #333333;}

其中 --main-text-color 示意变量名，#333333示意变量值。

那原生 CSS 为什么采纳两个减号 -- 开始，我猜想是因为 @ 被 Less 占了，$被 Sass 占了，它被迫抉择了--。

原生 CSS 变量是受 HTML 层级关系的限度的，并从其父级继承这个值。所以说最佳的实际就是定义在根伪类 :root 选择器上。

示例代码如下：

:root {--main-text-color: #FF6A00;}

而后咱们的 HTML 构造如下：

<h1 class="text"> 此岸繁華 </h1>

当初咱们曾经定义好了变量和 HTML 构造，应用 CSS 中的变量应用 var() 函数，实现如下：

.text {color: var(--main-text-color);
}

最终的实现成果如下：

值得注意的是 自定义属性的 大小写是敏感 的，即--my-color 和 --My-color 会被认为这是两个变量。

简单值的用法

当咱们须要应用一个函数作为一个值去应用的时候，例如上面这段代码

background-image: url(./image/avatar.png);

应用变量定义的时候不应该只定义./image/avatar.png，而是将整个值作为一个变量，定义如下：

--avatar: url('./image/avatar.png');
background-image: url(./image/avatar.png);

变量的继承性

原生 CSS 的变量存在着继承，也就是说咱们为某个父级增加一个变量，能够在子级任何拜访。

HTML 构造如下：

<div class="parent">
  <div class="child"> 此岸繁華 </div>
</div>

CSS 的代码如下：

.parent {
  --color: #FF6A00;
  --font-size: 24px;
  --font-weight: 600;
}

.child {color: var(--color);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  margin: 32px;
}

咱们在 .parent 中定义的变量能够在子级的任意应用。

最终的成果如下：

变量的备用值

CSS 的 var() 函数能够承受两个参数，第一个作为他的值，第二个参数作为其备用值，备用值在第一个值生效的时候应用。

这个函数只能承受两个参数，第一个参数为变量的名称，第二个参数为备用值，然而如果大于两个参数得话，第一个逗号 , 前面的的参数会作为一个参数应用。

第二个参数是能够进行嵌套的，示例代码如下：

.first {
    /* 以后文字的色彩为 red，因为 --color 不在以后元素内，也不再以后父元素内 */
    color: var(--color, red);
    /* 以后文字的色彩为 --main-text-color，如果 --main-text-color 不存在时，文字色彩为 red */
    color: var(--color, var(--main-text-color, red));
    /* 以后文字的色彩为 red,white，所以说 var()只能够应用两个参数 */
    color: var(--color, red, white);
}

HTML 代码如下：

<h1 class="first"> 此岸繁華 </h1>

通过 JS 获取和设置 CSS 变量

通过 JavaScript 获取和设置 JavaScript 变量的具体步骤如下，

1. 获取指定 DOM 节点
2. 通过 getComputedStyle() 办法获取以后 DOM 节点的 CSSStyleDeclaration 对象
3. 通过 CSSStyleDeclaration.getPropertyValue(变量名 / 属性名) 获取指定的变量值
4. 通过 Element.style.setProperty() 批改或者设置一个变量的值

实现代码如下：

// 1
const child = document.getElementById('child')
// 2 3
let color = getComputedStyle(child).getPropertyValue('--color')
console.log(color) // #FF6A00
// 4
child.style.setProperty('--color', '#eeeccc')
color = getComputedStyle(child).getPropertyValue('--color')
console.log(color) // #eeeccc

总结

CSS 原生反对变量能够帮忙咱们解决一些问题，最要的的就是 CSS 中的一些值得复用，例如色彩之类的。还有就是通过 Less 或者 Cass 解决不了的问题，例如咱们的这个字体色彩是从服务端获取的，须要通过 CSS 的形式为其设置字体色彩，这样的话应用 Less 或者 Sass 解决根本是不可能的，然而有个这个货色就很好的帮忙了咱们解决这些问题。

把握了原生的 CSS 变量配合 Less 或者 Sass 能够在开发中实现一些之前做不到的成果。

精彩文章

【从头学前端】04- 搞懂 JavaScript 中的根本数据类型

【从头学前端】03- 这次我就搞懂了 JavaScript 中的变量

【从头学前端】02-JavaScript 词法构造

【从头学前端】01- 什么是 JavaScript