• RSS
  • 最新
  • 归档

CSS 自定义属性 -- 使用 JS 和不使用 JS

#CSS

原文:CSS Custom Properties—Dynamic Changes With And Without Javascript by Steven Bradley

你曾想过在页面加载过后去修改 SassLess 的变量值么?我曾经尝试过,但并没有成功,因为当预处理的代码编译成了 CSS,它的变量就不再是变量了,然而,自定义属性 就没有这样的限制。

在该系列的文章中,我曾提及过自定义属性它最牛扳的特性就是它的 动态性。它的强大我们一眼就能对比出来,预处理变量 在编译后就成了固定值,而 自定义属性 可以在页面加载后继续更改变量的值。

本篇文章我们将一起来看如何通过用户交互和 JavaScript 来做一些帅气的改变。

不用 JS 来更改 CSS 自定义属性

大多数的动态特效貌似多多少少都需要点 JavaScript,所以,我们就从一个简单的例子入手,使用自定义属性改变 :hover 的效果。

我们给一个 div 一个 widthheight,然后,定义一个值为 #ccc 的自定义属性 background,接着,我们用 var 函数设置 background-color,并给它 1stransition

div {
  width: 15em;
  height: 15em;

  --background: #ccc;
  background-color: var(--background);
  transition: background-color 1s;
}

为了改变 background-color,我们再次定义 --background 的值。

div:hover {
  --background: #cce;
}

虽然,上面的例子不用自定义属性也可以轻松的实现,但如果我们的改变增多,使用自定义属性书写的代码明显要更干净,更易读。

使用 JS 来更改 CSS 自定义属性

JavaScript 来更改自定义属性的值将会变的特别有趣。

首先,我们必须要知道如何获取自定义属性的值,和如何设置。

获取自定义属性的值

要获取自定义属性的值,你要知道两个 JavaScript 函数:window.getComputedStylegetPropertyValue,前者可以获取元素所有 CSS 属性的值,后者可以获取特定属性的值。

let style = window.getComputedStyle(element, [pseudoElt]);
var value = style.getPropertyValue(property);

如果你是 JavaScript 方向,那么上面的代码你肯定不陌生,如果你并不熟悉,可以参考下面的 demo。

首先,我们使用 :root 定义一个全局变量:

:root {
  --color: red;
}

接着,我们使用 getComputedStyle()getPropertyValue() 方法来读取 color 的值。

var styles = getComputedStyle(document.documentElement); // 获取 root 的样式
var colorValue = styles.getPropertyValue("--color"); // 获取 --color 的值

现在 colorValue 的值就为 --color 的值,不信你可以在控制台中打印。

console.log(colorValue); // red

如何设置自定义属性的值

要设置自定义属性的值,你要用到 style.setProperty 这个方法。

style.setProperty(propertyName, value, priority);

setProperty 有三个参数,前两个是属性名称和属性的值,其中,属性值可以为空,第三个 priority 是可选的,允许你设置 important,但 CSS 准则建议尽量不设置该属性。

设置一个新值比读取一个值更容易,因为你不需要将值保存到变量中。

document.documentElement.style.setProperty("--color", "green");

事实上,在设置新值前,该属性可以不存在,你可以在 setProperty 中初始化自定义属性。

移除自定义属性

还有一个 removeProperty() 方法可以移除自定义属性,如果你不想要了的话。

var oldValue = style.removeProperty(property);

使用 Color Picker 更改颜色值

接下来,我们就一起来实践一下。

首先,我们创建一个空的 div,用于显示用户输入的颜色。

<div></div>
<input type="color" id="div-bkgd" value="#cccccc" />

接下来,我们在全局创建一个 --background 自定义属性,初始化为 #ccc,给 div 一个 widthheightmargin,用 var()background 赋值, 然后简单设置 input 的样式。

:root {
  --background: #ccc;
}

div {
  width: 20em;
  height: 20em;
  margin: 1em auto;
  background: var(--background);
}

input {
  display: block;
  width: 10em;
  margin: 1em auto;
}

最后,我们使用 document.querySelector() 获取 input 元素,给该元素添加一个事件监听器,监听用户输入的变化,然后用 setProperty 将输入的值赋给自定义属性 --background

var colorInput = document.querySelector("#div-bkgd");

colorInput.addEventListener("change", function () {
  document.documentElement.style.setProperty("--background", this.value);
});

大功告成,你可以在复制代码在浏览器中运行查看效果。另外值得注意的是。color input 并不支持所有浏览器, 像在 IESafari 中就无法工作。

额外的 demo

为了便于大家充分地理解,下面提供了一些额外的 demo,帮助大家快速掌握。

总结

将自定义属性和 JavaScript 或其他脚本语言结合, 你会瞬间坠入 自定义属性 的爱河。