Houdini - CSS Typed OM:如何通过javascript获取已定义属性的值

Question

用例

我使用新的"注册属性">函数将自定义属性"--animation-duration"定义为时间值：

CSS.registerProperty({
name: '--animation-duration',
syntax: '<time>',
inherits: false,
initialValue: '1s'
});

在我的 CSS 中，我现在可以将此属性添加到我的类中并调整它的值：

.my-el {
--animation-duration: 1.5s;
}

现在我想通过 javascript 在我的元素上获取此属性的值，始终以毫秒为单位。这可以通过以下代码行实现：

const duration = CSSNumericValue.parse(getComputedStyle(el).getPropertyValue('--ripple-anim-duration')).to('ms').value; // 1500

---

问题

在我的通用 javascript 中是否有更短/更好的方法来获取此值？

---

额外

我知道你可以在一个工作包中做得更短(在油漆工作包中测试(：

const duration = properties.get('--ripple-anim-duration').to('ms').value; // 1500

并且以下代码在我的通用 javascript 中不起作用：

const duration = el.attributeStyleMap.get('--ripple-anim-duration').to('ms').value; // ¯_(ツ)_/¯

Answer 1

这是正常方式el.computedStyleMap().get('--ripple-anim-duration').to('ms').value

1. 你不需要使用 CSSNumericValue.parse
属性样式
2. 映射适用于样式属性中定义的属性

如果您有兴趣，我已经写了几篇关于自定义属性和值的文章：

• 第 1 部分：https://vitaliy-bobrov.github.io/blog/css-custom-properties-in-depth/
• 第 2 部分：https://vitaliy-bobrov.github.io/blog/css-custom-properties-in-depth-part-2/