Чтобы на самом деле определить, был ли стиль css унаследован или установлен для самого элемента, вам нужно будет реализовать точные правила, применяемые браузерами, чтобы определить используемое значение для определенного стиля элемента.
Вам нужно будет реализовать эту спецификацию , которая определяет способ вычисления вычисленных и используемых значений.
Селекторы CSS могут не всегда следовать отношениям родитель-потомок, что могло бы упростить вопросы.Рассмотрим этот CSS.
body {
color: red;
}
div + div {
color: red;
}
и следующий HTML:
<body>
<div>first</div>
<div>second</div>
</body>
И first, и second будут отображаться красным, однако первый div - красный, потому что оннаследует это от родителя.Второй div красный, потому что к нему применяется правило CSS div + div, которое более специфично .Глядя на родителя, мы увидим, что он имеет тот же цвет, но это не то, откуда второй div получает его.
Браузеры не предоставляют никаких внутренних вычислений, кроме интерфейса getComputedStyle.
Простое, но ошибочное решение - запустить каждый селектор из таблиц стилей и проверить, удовлетворяет ли данный элемент селектору.Если да, то предположим, , что стиль был применен непосредственно к элементу.Скажем, вы хотели пройти каждый стиль в первой таблице стилей,
var myElement = $('..');
var rules = document.styleSheets[0].cssRules;
for(var i = 0; i < rules.length; i++) {
if (myElement.is(rules[i].selectorText)) {
console.log('style was directly applied to the element');
}
}