Предположим, у меня есть следующий CSS:
div {
-my-foo: 42;
}
Могу ли я позже в JavaScript как-то узнать, что значение свойства -my-foo
CSS для данного div
?
Предположим, у меня есть следующий CSS:
div {
-my-foo: 42;
}
Могу ли я позже в JavaScript как-то узнать, что значение свойства -my-foo
CSS для данного div
?
Я не думаю, что вы можете получить доступ к недопустимым именам свойств, по крайней мере, это не работает в 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
но для меня это похоже на большую работу, и, не зная причин для этого, я не могу сказать, существует ли альтернатива для вашей проблемы.
Как отметил Анураг, это было предложено в DOM Level 2 и более поздних версиях. Internet Explorer был единственным браузером, который его реализовал, и они перестали поддерживать его в Edge. IE ожидает, что свойство не начинается с тире, поэтому my-foo: 42;
должен работать.
Новые браузеры поддерживают переменные CSS. Они начинаются с двойной тире: --my-foo: 42;
(их можно повторно использовать в другом месте, как это font-size: var(--my-foo);
)
div {
--my-foo: 42;
my-foo: 42;
}
// 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 "в активной разработке" .