你曾想过在页面
加载过后去修改 Sass或Less的变量值么? 我曾经尝试过, 但并没有成功, 因为当预处理的代码编译成了 CSS, 它的变量就不再是变量了, 然而,自定义属性就没有这样的限制.在该系列的文章中, 我曾提及过
自定义属性它最牛扳的特性就是它的动态性. 它的强大我们一眼就能对比出来,预处理变量在编译后就成了固定值, 而自定义属性可以在页面加载后继续更改变量的值.本篇文章我们将一起来看
如何通过用户交互和 JavaScipt 来做一些帅气的改变.
不用 JS 来更改 CSS 自定义属性
大多数的动态特效貌似多多少少都需要点 JavaScipt, 所以, 我们就从一个简单的例子入手, 使用自定义属性改变 :hover 的效果
我们给一个 div 一个 width 和 height, 然后, 定义一个值为 #ccc 的自定义属性 background. 接着, 我们用 var 函数 设置 background-color, 并给它 1s 的 transition.
div {
width: 15em;
height: 15em;
--background: #ccc;
background-color: var(--background);
transition: background-color 1s;
}
为了改变 background color, 我们再次定义 --background 的值
div:hover {
--background: #cce;
}
虽然, 上面的例子不用自定义属性也可以轻松的实现, 但如果我们的改变增多, 使用自定义属性书写的代码明显要更干净, 更可读
使用 JS 来更改 CSS 自定义属性
用 JavaScipt 来更改自定义属性的值将会变的特别有趣.
首先, 我们必须要知道如何获取自定义属性的值, 和如何设置
获取自定义属性的值
要获取自定义属性的值, 你要知道两个 JavaScipt 函数: window.getComputedStyle 和 getPropertyValue, 前者可以获取元素所有 CSS 属性的值, 后者可以获取特定属性的值.
let style = window.getComputedStyle(element, [pseudoElt]);
var value = style.getPropertyValue(property);
如果你是 JavaScipt 方向, 那么上面的代码你肯定不陌生. 如果你并不熟悉, 可以参考下面的示例
首先, 我们使用 :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 一个 width, height 和 margin, 用 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 并不支持所有浏览器, 像在 IE 和 Safari 中就无法工作.
额外的示例
为了便于大家理解, 上面的例子都比较简单, 下面提供了一些比较复杂的应用, 帮助大家快速掌握.
总结
将自定义属性和 JavaScipt 或其他脚本语言结合, 你会瞬间坠入自定义属性的爱河
原文链接: CSS Custom Properties—Dynamic Changes With And Without Javascript
