Могу ли я получить доступ к значению недействительных / пользовательских свойств CSS из JavaScript?

Question

Предположим, у меня есть следующий CSS:

div {
    -my-foo: 42;
}

Могу ли я позже в JavaScript каким-то образом узнать, какое значение свойства -my-foo CSS для данного div?

Answer 1

Я не думаю, что вы можете получить доступ к недопустимым именам свойств, по крайней мере, для меня это не работает в Chrome или Firefox. CSSStyleDeclaration просто пропускает недопустимое свойство. Для данного CSS:

div {
    width: 100px;
    -my-foo: 25px;
}

style:CSSStyleDeclaration объект содержит только следующие ключи:

0: width
cssText: "width: 100px"
length: 1

Однако, что интересно, это то, что спецификация DOM-Level-2 Style говорит:

Хотя реализация может не распознавать все свойства CSS в блоке объявления CSS, ожидается, что она предоставит доступ ко всем указанным свойствам в таблице стилей через интерфейс CSSStyleDeclaration.

подразумевает, что объект CSSStyleDeclaration должен был перечислить свойство -my-foo в приведенном выше примере. Может быть, есть какой-нибудь браузер, который его поддерживает.

Код, который я использовал для тестирования: http://jsfiddle.net/q2nRJ/1/.

Примечание : Вы всегда можете сделать DIY, анализируя необработанный текст. Например:

document.getElementsByTagName("style")[0].innerText

но мне кажется, что это большая работа, и, не зная ваших причин для этого, я не могу сказать, существует ли лучший альтернативный вариант для вашей проблемы.

Answer 2

Пользовательские свойства CSS

Стиль DOM уровня 2

Как указывал Anurag, это было предложено в DOM Level 2 и позже устарело.Internet Explorer был единственным браузером, который реализовал его, и они перестали поддерживать его в Edge.IE ожидает, что свойство не начинается с тире, поэтому my-foo: 42; должно работать.

Стиль переменных CSS

Новые браузеры поддерживают переменные CSS.Они начинаются с двойной черты: --my-foo: 42; (их можно использовать в другом месте, например, font-size: var(--my-foo);)

Пример

CSS

div {
  --my-foo: 42;
  my-foo: 42;
}

JS

// Chrome 49, Firefox 31, Safari 9.1 (future Edge):
const cssVariable = bodyStyles.getPropertyValue('--my-foo')
// IE:
const cssCustomProperty = bodyStyles['my-foo']

Поддержка браузеров

В настоящее время Microsoft Edge является единственным браузером, не поддерживающим ни один из этих методов, но на момент написания CSS-переменных в Edge «в активной разработке» .