Гудини - CSS Typed OM: Как получить значение определенного свойства через Ja vaScript

Question

USECASE

У меня есть пользовательское свойство--animation-duration, определенное как значение времени с новой функциейregisterProperty:

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. attributeStyleMap работает для свойств, определенных в атрибуте style

Я написал несколько постов о пользовательских свойствах и значениях, если вам интересно: https://vitaliy-bobrov.github.io/blog/css-custom-properties-in-depth/ https: // vitaliy-bobrov.github.io / блог / KSS-таможенно-свойства-углубленные части-2 /