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

Question

用例

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

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

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

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

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

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

问题

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

额外的

我知道你可以在worklet中缩短它（在paint-worklet 中测试）：

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

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

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

score 2 · Accepted Answer

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

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

1 回答 1