Доступ к недопустимым пользовательским свойствам CSS из JavaScript

Можно создавать собственные свойства CSS с помощью префикса -. Однако можно ли получить доступ к этим пользовательским свойствам из JavaScript?

К сожалению, ответ — нет, по крайней мере, в основных браузерах, таких как Chrome и Firefox. Пользовательские свойства CSS с недопустимыми именами просто игнорируются синтаксическим анализатором CSS. Например, рассмотрим следующий CSS:

div {
    -my-foo: 42;
}

Даже если этот CSS применен к элементу div, попытка доступа к свойству -my-foo с помощью JavaScript ничего не вернет. Объект CSSStyleDeclaration будет содержать только допустимые свойства, такие как ширина или высота.

Это поведение соответствует спецификациям CSSStyleDeclaration. В спецификациях указано, что объект должен включать только «указанные свойства», а это означает, что пользовательские свойства не распознаются. Однако некоторые реализации могут поддерживать доступ к пользовательским свойствам, но это не гарантировано.

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

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

Хотя этот подход работает, он не так хорош, как просто, как доступ к свойствам непосредственно из объекта CSSStyleDeclaration. Более того, это требует дополнительного анализа и манипуляций с CSS-текстом.