Гудини - CSS Typed OM: Как получить значение определенного свойства через JavaScript - PullRequest
Новая
       2

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

0 голосов
/ 22 мая 2018

Usecase

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

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; // ¯\_(ツ)_/¯

1 Ответ

0 голосов
/ 31 декабря 2018

Это обычный способ 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-deep / / 1012 *https://vitaliy -bobrov.github.io / блог / KSS-таможенно-свойства-углубленные-часть-2 /

...