Получить элемент, от которого наследуется правило CSS

Question

В jQuery мы можем легко получить значение CSS для данного элемента с помощью метода css:

$('#myElement').css('line-height'); // e.g. '16px'

Теперь, поскольку это значение CSS могло быть унаследовано от родительского элемента, есть лиЛюбой способ узнать, к какому элементу применено это правило?

Например, допустим, у меня есть следующий HTML-код:

<div class="parent">
    <div id="myElement"></div>
</div>

и следующий CSS-код:

.parent {
    line-height: 20px;
}

Вызов метода css для #myElement вернет 20px, но это не будет означать, что он унаследован от .parent.

Я знаю, что могу просто запустить Web Inspector /Dev Tools / Firebug, но я хочу получить его программно.

Возможно ли это вообще?

Answer 1

У меня есть решение, подобное брофе.Это также имеет ту же проблему, хотя.Вот скрипка:

http://jsfiddle.net/2w3kt/

---

$.fn.getStyleParent = function(property)
{
    var $source = this.get(0), // only do for 1st element :P
        srcVal = $source.css(property),
        $element = null;

    $(this).parents().each(function()
    {
        var $this = $(this);
        if( $this.css(property) == srcVal )
            element = $this;
        else
            return false; // stops the loop
    });

    return $element;
}

Answer 2

Пройдите вверх по цепочке parentElement, проверяя значение css () каждого элемента.Первый элемент со значением parent (). Css (), который отличается (вероятно), является элементом, на который нацеливается селектор правил CSS.

См. Эту скрипту для примера: http://jsfiddle.net/broofa/VPWV9/2/ (см.вывод console.log)

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