Подтвердить что ты не робот

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

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

div {
    -my-foo: 42;
}

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

4b9b3361

Ответ 1

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

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

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

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

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

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

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

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

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

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

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

Ответ 2

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

Стиль DOM Level 2

Как отметил Анураг, это было предложено в 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 "в активной разработке" .