Houdini-CSS类型OM：如何通过javascript获取已定义属性的值

用例

我将自定义属性“--animation duration”定义为具有新的“registerProperty”函数的时间值：

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

现在我想通过javascript在我的元素上获取该属性的值，总是在ms中。这可以通过以下代码行实现：

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

---

问题

在我的通用javascript中，是否有一种更短/更好的方法来获取这个值

---

额外的

我知道您可以在工作集中做得更短（在绘制工作集中测试）：

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

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

这是正常的方式

el.computedStyleMap（）.get（'--ripple anim duration'）。to（'ms'）。value

您不需要使用CSSNumericValue.parse

attributeStyleMap用于样式属性中定义的特性

如果您感兴趣，我已经写了一些关于自定义属性和值的帖子：

• 第1部分：
• 第2部分：

---

哦，非常感谢！另外：有趣的博客帖子，谢谢分享。

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

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