Как программно проверить стили CSS для определенных элементов?

Question

я могу легко проверить, что CSS стиль элемент имеет, если он был применен встроенный:

<p style="color: red;">This is red</p> 

JS читать этот цвет:

document.querySelector('p').style.color == 'red' 

Как я могу проверить стиль CSS элемента, если этот стиль применялся из внутренней или внешней таблицы стилей?

Answer 1

Вы можете использовать window.getComputedStyle(). Возвращаемое значение - CSSStyleDeclaration, и вы можете получить доступ к свойствам напрямую с помощью точечной нотации или использовать .getPropertyValue('property name').

var p = document.querySelector('.demo'); 
 
var style = window.getComputedStyle(p); 
 

 
console.log(style); 
 

 
console.log('style.color ', style.color); 
 

 
// or 
 

 
console.log('getPropertyValue(\'color\')', style.getPropertyValue('color'));

.demo { 
 
    color: red; 
 
}

<p class="demo">This is red</p>

Answer 2

использование JQuery метод CSS, чтобы получить значение свойства для первого элемента. Следующий код получит свойство цвета для первого p-тега в документе. Используйте идентификатор элемента, чтобы выбрать конкретный тег.

var color = $("p").css("color");