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

2020-06-15151次阅读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元素上获取它们。

上一篇: CSS mask遮罩之mask-image  下一篇: aspect-ratio元素放在元素上即可根据auto宽度计算出高度  

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