StylePropertyMapReadOnly

Интерфейс StylePropertyMapReadOnly API CSS Typed Object Model предоставляет доступ к блоку объявления CSS, являющемуся чтением-только альтернативой CSSStyleDeclaration. Получите экземпляр этого интерфейса с помощью Element.computedStyleMap().

StylePropertyMapReadOnly.size

Возвращает целое без знака, содержащее размер объекта StylePropertyMapReadOnly.

StylePropertyMapReadOnly.entries()

Возвращает массив пар собственных перечисляемых свойств объекта, в том же порядке, что и в цикле for...in (разница заключается в том, что цикл for...in перечисляет также свойства в цепочке прототипов).

StylePropertyMapReadOnly.forEach()

Выполняет предоставленную функцию один раз для каждого элемента объекта StylePropertyMapReadOnly.

StylePropertyMapReadOnly.get()

Возвращает значение указанного свойства.

StylePropertyMapReadOnly.getAll()

Возвращает массив объектов CSSStyleValue, содержащих значения для указанного свойства.

StylePropertyMapReadOnly.has()

Указывает, имеется ли указанное свойство в объекте StylePropertyMapReadOnly.

StylePropertyMapReadOnly.keys()

Возвращает новый итератор массива, содержащий ключи для каждого элемента в StylePropertyMapReadOnly.

StylePropertyMapReadOnly.values()

Возвращает новый итератор массива, содержащий значения для каждого индекса в объекте StylePropertyMapReadOnly.

Нам нужен элемент для наблюдения:

<p>
  This is a paragraph with some text. We can add some CSS, or not. The style map
  will include all the default and inherited CSS property values.
</p>
<dl id="output"></dl>

Добавим немного CSS с пользовательским свойством для лучшей демонстрации вывода:

p {
  --someVariable: 1.6em;
  --someOtherVariable: translateX(33vw);
  --anotherVariable: 42;
  line-height: var(--someVariable);
}

Добавим JavaScript, чтобы получить наш абзац и вернуть список определений всех значений свойств CSS по умолчанию с помощью Element.computedStyleMap().

// get the element
const myElement = document.querySelector("p");

// get the <dl> we'll be populating
const stylesList = document.querySelector("#output");

// Retrieve all computed styles with computedStyleMap()
const stylePropertyMap = myElement.computedStyleMap();

// iterate through the map of all the properties and values, adding a <dt> and <dd> for each
for (const [prop, val] of stylePropertyMap) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = prop;
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  cssValue.innerText = val;
  stylesList.appendChild(cssValue);
}