如何在JavaScript中获取页面上的所有自定义属性

在JavaScript中，我们可以使用getComputedStyle和getPropertyValue访问属性值。

html {
  --color-accent: #00eb9b;
}

const colorAccent = getComputedStyle(document.documentElement).getPropertyValue('--color-accent'); // #00eb9b

也可以通过内联样式来设置与获取值：

document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px
document.documentElement.style.getPropertyValue("--padding'"); // 124px

请注意，自定义属性是有作用域的。这意味着我们需要从一个特定的元素获取计算样式。正如我们之前在：root中定义的变量一样，我们在HTML元素上获取它们。