Метод Window: getDefaultComputedStyle()

Нестандартно: Эта функция нестандартна и не соответствует стандартам. Не используйте её на веб-сайтах в производстве: она может не работать для всех пользователей. Также могут существовать значительные несовместимости между реализациями, и поведение может измениться в будущем.

Метод getDefaultComputedStyle() возвращает значения по умолчанию всех свойств CSS элемента, игнорируя стили автора. То есть, учитываются только стили пользователя и агента пользователя.

Синтаксис

getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)

Параметры

element: Элемент, для которого необходимо получить вычисленный стиль.
pseudoElt Необязательно: Строка, определяющая псевдоэлемент для сопоставления. Должно быть null (или не указано) для обычных элементов.

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

Возвращаемый style объект CSSStyleDeclaration. Объект имеет тот же тип, что и возвращаемый объектом Window.getComputedStyle(), но учитывает только стили пользователя и агента пользователя.

Примеры

Простой пример

const elem1 = document.getElementById("elemId");
const style = window.getDefaultComputedStyle(elem1);

Более подробный пример

<style>
  #elem-container {
    position: absolute;
    left: 100px;
    top: 200px;
    height: 100px;
  }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>

<script>
  const elem = document.getElementById("elem-container");
  const theCSSprop = window.getDefaultComputedStyle(elem).position;
  document.getElementById("output").textContent = theCSSprop; // Will output "static"
</script>

Использование с псевдоэлементами

Метод getDefaultComputedStyle() может извлечь информацию о стиле из псевдоэлементов (например, ::before или ::after).

<style>
  h3:after {
    content: " rocks!";
  }
</style>

<h3>generated content</h3>

<script>
  const h3 = document.querySelector("h3");
  const result = getDefaultComputedStyle(h3, ":after").content;

  console.log("the generated content is: ", result); // returns 'none'
</script>

Примечания

Возвращаемое значение в некоторых известных случаях преднамеренно некорректно. В частности, для предотвращения проблемы безопасности утечки истории CSS, браузеры могут «сознательно врать» о используемом значении для ссылки и всегда возвращать значения, как если бы пользователь никогда не посещал связанный сайт, и/или ограничивать стили, которые могут быть применены с использованием псевдоселектора :visited. Подробности о реализации см. в https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ и https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/.

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

Предложено в рабочую группу CSS.

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`getDefaultComputedStyle`	Нет	Нет	19	Нет	Нет	Нет	19	Нет	Нет	Нет	Нет
`pseudo_element_support`	Нет	Нет	19	Нет	Нет	Нет	19	Нет	Нет	Нет	Нет

© 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/Window/getDefaultComputedStyle