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

Question

用例

我将自定义 属性 '--animation-duration' 定义为具有新的 'registerProperty[=48= 的时间值]'函数：

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

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

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

现在我想得到这个属性的值在我的元素槽javascript，总是在毫秒。这可以通过以下代码行实现：

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

---

问题

是否有 shorter/better 方法 可以在我的一般 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; // ¯\_(ツ)_/¯

Answer 1

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

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

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

• 第 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/