Как работает getComputedStyle в JS??

Question

[Theory Theory]

.first{
	border: 2px solid red;
}

let element = document.querySelector(".first");

console.log(getComputedStyle(element).border);      // empty string
console.log(getComputedStyle(element).borderTop);		// empty string

Да и кстати, getComputedString это объект или псевдомассив?? (все говорят объект, но по циклу for of перебирается без проблем)

Comments

[Kovalsky]

Все ответы - в официальной документации

Answer 1

[Алексей Уколов]

getComputedStyle(element).getPropertyValue("border");

https://developer.mozilla.org/ru/docs/Web/API/Wind...

Там же почитайте и что возвращает и про for of…

Comments

[Aetae]

Это работает только в chrome.

Answer 2

[Aetae]

Потому что getComputedStyle даёт только не композитные значения, т.е. вы можете запросить borderTopColor, но не borderColor и не border.

getComputedStyle возвращает итерируемый объект CSSStyleDeclaration.
Для справки Array в javascript тоже просто итерируемый объект.

P.S. Ребята до меня почему-то все дали ссылки на "русскую" mdn, которая мало того что всё равно не переведена, так в ней, собственно, отсутствуют упоминания об этой особенности.
Как и о том, что совершенно не имеет значения как забирать, через getPropertyValue, camelCase свойством или kebab-case свойством - любой вариант верен.

Comments

[Kovalsky]

И правда, по спеке getComputedStyle должен возвращать значения только для реальных свойств, а не для алиасов. Но по факту достаточное количество браузеров все таки обрабатывают обращения к алиасам; я таких уже два насчитал и они единственные которыми я пользуюсь. Я совсем не говорю что в связи с этим можно теперь забить на мдн и для удобства пользоваться исключительно алиасами, но если уж даже в такой мелочи браузеры не согласны друг с другом, то гораздо безопаснее будет все же обращаться к нужным свойствам с помощью getPropertyValue чтобы не нарваться на неожиданные результаты

[Aetae]

Kovalsky, неа, element.style.property - было и работало всегда, с самого зарождения, так что никуда не денется(пока не выпилят из стандарта, что очень врядли).
Что касается коротких свойств - они работают только в Хроме и его метастазах. То что он поглотил 2\3 рынка - не причина, чтобы ориентироваться только на него, усиливая монополию, а вовсе даже наоборот.

[Kovalsky]

Aetae, да, я именно это и сказал.

А element.style это типа cssstyledeclaration?

[Aetae]

А element.style это типа cssstyledeclaration?

Да.

и они единственные которыми я пользуюсь.

Кстати зачем ты пользуешься двумя хромами?