CSSStyleDeclaration: метод getPropertyValue()

Метод интерфейса CSSStyleDeclaration.getPropertyValue() возвращает строку, содержащую значение указанного CSS-свойства.

property

Строка, представляющая имя свойства (в формате с дефисами) для проверки.

Строка, содержащая значение свойства. Если свойство не задано, возвращается пустая строка.

Значение свойства вычисляется динамически, а не является тем, что было изначально указано в объявлении. Сериализация происходит следующим образом:

• Если property является сокращенным свойством, то берутся все его развернутые свойства. Обратите внимание, что сокращенные свойства, указанные в исходном стилевом листе, уже были расширены на этапе парсинга. Если хотя бы одно из этих развернутых свойств не объявлено или их !important статусы различаются, то результатом является пустая строка. В противном случае возвращается значение свойства, расширяющееся до того же списка развернутых свойств, и это значение сокращенного свойства будет опускать как можно больше компонентов и упорядочено в соответствии с каноническим порядком в формальном определении, если это возможно. Если какая-либо из вышеперечисленных синтаксических трансляций будет менее обратной совместимой, не выполнять их.
• В противном случае свойство сериализуется в соответствии с его типом данных. Каждый тип данных имеет одно каноническое представление; например, <color> значения всегда используют rgb(R, G, B) или rgba(R, G, B, A).

По сути, значение свойства канонизируется, обеспечивая, что два значения свойства с одинаковым визуальным эффектом сравниваются как равные, даже если они объявлены по-разному.

Следующий код JavaScript запрашивает значение свойства margin в правиле CSS-селектора:

const declaration = document.styleSheets[0].cssRules[0].style;
const value = declaration.getPropertyValue("margin"); // "1px 2px"

Возвращаемая строка может отличаться от значения, указанного в стилевом описании элемента. Например, эта стилизация:

<style>
  p#blueish {
    color: hsl(250 90 50);
  }
</style>
<script>
  const declaration = document.styleSheets[0].cssRules[0].style;
  const value = declaration.getPropertyValue("color");
</script>

Установит значение rgb(51, 13, 242);. Это важно при сравнении стилей по строкам.