Получение свойств CSS элемента из JavaScript

база знаний
, , ,
#1

Иногда нужно поработать с DOM в консоли браузера, в том числе получить значение стиля.
Обычно это делается так:

element = document.getElementById('foo');
color = element.style.backgroundColor;

Но работает это только тогда, когда у элемента стиль задан inline:

< div style="color:red;">

Если же стиль задан в CSS, то element.style.backgroundColor ничего не вернёт.
Чтобы всё заработало, нужно запросить просчитанные стили:

element = document.getElementById('foo');
color = window.getComputedStyle(element).backgroundColor;

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

6 лайков
#2

jQuery:

element = $('#id');
color = element.css('background-color');

чистый javascript хорошо, но все таки jQuery это ИНСТРУМЕНТ!!

#3

jQuery — это в первую очередь подключаемая библиотека, которая есть не везде.
Внутри jQuery стиль берётся именно тем же, нативным способом:

// from jquery.js
function getStyles( elem ) {
	return window.getComputedStyle( elem, null );
}
1 лайк
#4

Да если там где вы его хотите использовать, есть его поддержка. А вот javascript точно есть везде

#5

ок, согласен) ради опыта вопрос:
в каких случаях не возможно использовать jquery или аналоги?

#6

Например, при автоматизации https://www.google.com

#7

Как быть, если мне известен DIV с определенным CSS свойством ?

Вот у меня есть div, у него (у единственного на странице) - z-index: 9998
Я хочу найти его и задать ему определенный класс.

Дело в том, что нет возможности поменять у этого div-a код на лету - он формируется из javascript библиотеки, что приходит с другого сайта.

#8 
$('div').filter(function(){ return $(this).css('z-index') == '9998'; })

или

$('div').each(function({ 
    if ($('div').css('z-index') == '9998') {
        ....
    }
}
1 лайк