Можно ли найти правила CSS из узла HTML через JavaScript?

Question

Я хочу получить элемент в DOM, а затем посмотреть, какие правила в моих файлах CSS способствуют его появлению. Подобно тому, что делает Firebug или инспектор webkits. Есть ли способ сделать это в JavaScript?

Обновление:

Я должен предоставить ограничение и конкретный пример - меня интересует только достижение этого в браузерах, основанных на webkit, так что трудности с кросс-браузерными процессами не являются большой проблемой. Чего я конкретно пытаюсь достичь, так это. Допустим, у меня есть таблица стилей следующим образом:

     div {
        background: #f0f0f0;
     }

     .example {
        padding: 10px;
     }

А потом, скажем, некоторый HTML-код, подобный этому:

  <div id="test" class="example">
     <hgroup>
        <h1>Test</h1>
        <h2>A sample file to play with.</h2>
     </hgroup>
     <ul class="sample">
        <li id="item_1">Item 1</li>
        <li id="item_2">Item 2</li>
     </ul>
  </div>

Итак, в javascript я хочу иметь функцию, которая может найти селекторы из CSS, которые стилизируют объект:

get_selectors_for(document.getElementById('test'))
// should return:
// ['div','.example']

Насколько сложно отменить выборки запросов, зная, что нам нужно беспокоиться только о webkit, а не о всех браузерах?

Answer 1

Это то, что вы хотите. Только WebKit. Я узнал о getMatchedCSSRules, посмотрев на источник веб-инспектора хрома.

  function getAppliedSelectors(node) {
    var selectors = [];
    var rules = node.ownerDocument.defaultView.getMatchedCSSRules(node, '');

    var i = rules.length;
    while (i--) {
      selectors.push(rules[i].selectorText);
    }
    return selectors;
  }

Answer 2

Кросс-браузерное решение, с которым я добился успеха: http://www.brothercake.com/site/resources/scripts/cssutilities/

Он очень мощный и точный, получает намного больше информации, чем упомянутая выше функция только для webkit, и работает со всеми стилями (включая те, которые являются межсайтовыми, которые не активны или были отменены).

Answer 3

Возможно ли это?Абсолютно ... это просто (особенно кросс-браузер с IE в миксе), не так уж и много.Если вы действительно заинтересованы в этом, проверьте исходный код Firebug Lite CSS здесь .По крайней мере, методы достойно прокомментированы, показывая, какую информацию каждый выбирает.

.... или если вы хотите просто проверить в браузере, у которого нет инспектора, просто используйте FirebugLite .

Answer 4

Ну, это старая тема.Хорошо для Webkit для предложения решения.Как и предполагалось, я заглянул в firebug-lite и ... удивился !!Для каждого узла он перебирает каждое правило в каждой таблице стилей, проверяя, соответствует ли селектор нашим узлам или нет.

Answer 5

Существует надежный способ получить его, упомянутый в этом блоге :

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView
            .getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

Если вы используете Firefox и Firebug, вы можете попробовать запустить этот код в StackOverflow, чтобы увидеть, что вы получите:

document.defaultView.getComputedStyle(document.getElementById("custom-header"),"")

А с IE и Firebug Lite вы можете сделать:

document.getElementById("custom-header").currentStyle