您是否考虑过在页面加载后更改Sass或Less变量的值？我试过了，但是没有用，因为当预处理代码编译成CSS时，它的变量就不再是变量了，但是，自定义属性就没有这样的限制了。在本系列文章中，我提到自定义属性最强大的特性是它的动态特性。我们可以一目了然地比较一下它的强大，预处理变量在编译后变成固定值，而自定义属性可以在页面加载后继续改变变量的值。在本文中，我们将了解如何通过用户交互和JavaScript进行一些很酷的更改。不使用JS自定义属性更改CSS大多数动态效果似乎都需要一些JavaScript，所以我们从一个简单的例子开始，使用自定义属性来更改效果：hover我们给一个div设置宽度和高度，然后定义一个值是#ccc的自定义属性背景。接下来，我们使用var函数来设置背景颜色，并给它一个1s的transitiondiv{width:15em;高度：15em；--背景：#ccc；背景色：var(--background);transition:background-color1s;}为了改变背景颜色，我们再次定义--background的值，但如果我们的改动增加，使用自定义属性编写的代码显然更清晰，可读性更强。使用JS改变CSS自定义属性和使用JavaScript改变自定义属性的值会变得特别有趣。首先，我们必须知道如何获取自定义属性的值，以及如何设置它来获取自定义属性的值。获取自定义属性的值，需要知道两个JavaScript函数：window.getComputedStyle和getPropertyValue，前者可以获取一个元素的所有CSS属性值，后者可以获取某个特定属性的值。letstyle=window.getComputedStyle（元素，[pseudoElt]);varvalue=style.getPropertyValue(属性);如果你是JavaScript方向的，那你一定对上面的代码不陌生。不熟悉的可以参考下面的例子首先，我们使用:root定义一个全局变量：root{--color:red}接下来，我们使用getComputedStyle()和getPropertyValue()方法读取color.var的值styles=getComputedStyle(document.documentElement);//获取根的样式varcolorValue=styles.getPropertyValue('--color');//获取--color的值现在colorValue的值就是--color的值，不信你可以printconsole.log(colorValue);//如何设置红色自定义属性的值要设置自定义属性的值，需要使用方法style.setPropertystyle.setProperty(propertyName,value,priority);setProperty有三个参数，前两个是属性名和属性值，其中属性值可以为Empty，第三个优先级是可选的，允许你设置重要的，CSS指南建议，尽量不要设置这个属性。设置新值比读取值更简单，因为您不需要将值存储在变量.document中。documentElement.style.setProperty('--color','green');事实上，在设置新值之前，该属性可能不存在。您可以在setProperty中初始化自定义属性。移除自定义属性还有一个removeProperty()方法可以移除自定义属性，如果你不再需要它varoldValue=style.removeProperty(property);使用拾色器改变颜色值接下来我们一起来练习一下。为了方便大家理解，我们就不复杂了。首先，我们创建一个空的div来显示用户输入的颜色
