Spec-Zone.ru › Web APIs

StylePropertyMapReadOnly: метод get()

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из самых распространённых браузеров.

  • Подробнее
  • Полная совместимость
  • Отправить отзыв

Метод get() интерфейса StylePropertyMapReadOnly возвращает объект CSSStyleValue для первого значения указанного свойства.

Синтаксис

get(property)

Параметры

property

Имя свойства, значение которого необходимо получить.

Возвращаемое значение

Объект CSSStyleValue.

Примеры

Давайте получим несколько свойств и их значений. Начнём с создания ссылки внутри абзаца в HTML и добавления списка определений, который мы заполним JavaScript:

<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="results"></dl>

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

p {
  font-weight: bold;
}
a {
  --color: red;
  color: var(--color);
}

Используем метод computedStyleMap() элемента для возвращения объекта StylePropertyMapReadOnly. Создаём массив интересующих свойств и используем метод get() объекта StylePropertyMapReadOnly для получения только этих значений.

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

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

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

// array of properties we're interested in
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// iterate over our properties of interest
for (const property of ofInterest) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = property;
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  // use get() to find the value
  cssValue.innerText = styleMap.get(property);
  stylesList.appendChild(cssValue);
}

Спецификации

Спецификация
CSS Typed OM Level 1
# dom-stylepropertymapreadonly-get

Совместимость с браузерами

Рабочие столы Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari в iOS Samsung Internet WebView Android
get 66 79 Нет 53 16.4 66 Нет 47 16.4 9.0 66

См. также

  • API CSS Typed Object Model
  • Обучение Houdini: CSS Typed Object Model

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/StylePropertyMapReadOnly/get

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API