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

dom
css-selectors
javascript
Теги: #<Tag:0x00007fedb954db58> #<Tag:0x00007fedb954da18> #<Tag:0x00007fedb954d8d8>

(Сергей Блохин) #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 это прописная истина, но я узнал об этом только сейчас и решил с вами поделитья.


(Olexsandr Borisov) #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 );
}

(Mykhailo Poliarush) #4

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


(Olexsandr Borisov) #5

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


(Сергей Блохин) #6

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


(Эдуард Валеев) #7

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

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

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


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

или

$('div').each(function({ 
    if ($('div').css('z-index') == '9998') {
        ....
    }
}