Как определить CSS текст каждого узла в HTML

Question

Как я могу перебрать узлы HTML веб-страницы и получить текст CSS каждого узла в ней? Мне нужно что-то вроде того, что делает Firebug, если вы щелкнете по Узлу, он даст вам полный список всех CSS-текстов, связанных с этим Узлом (даже унаследованные стили).

Моя главная проблема - это не итерация по узлам HTML. Я делаю это с Html Agility Pack библиотекой. Мне просто нужно получить полный CSS для каждого узла.

p.s. Извините, мне следовало объяснить, что я хочу сделать это в C # (не в javascript)

Answer 1

Я нашел следующий фрагмент кода полезным для всех элементов на странице, и свойство 'CurrentStyle' показывает их вычисленный стиль:

HTMLDocument doc = (HTMLDocument)axWebBrowser1.Document;
        var body = (HTMLBody)doc.body;//current style

        var childs = (IHTMLDOMChildrenCollection)body.childNodes;
        var currentelementType = (HTMLBody)childs.item(0);
        var width = currentelementType.currentStyle.width;

Обратите внимание, что согласно моему предыдущему сообщению axWebBrowser1 является элементом управления WebBrowser.

Answer 2

Вы можете использовать элемент управления WebBrowser в C # для доступа к объекту документа htm и приведения его тега body следующим образом:

HTMLDocument doc = (HTMLDocument)axWebBrowser1.Document;
var body = (HTMLBody)doc.body;

Но перед этим вы должны добавить комференс: MSHTML в ваш проект. здесь вы можете получить доступ к body.currentStyle, который покажет вам все его стили, которые могут быть CSS или встроенными.

Answer 3

Вы можете получить текст CSS из атрибута style следующим образом:

node.getAttribute('style')

Или, если вы хотите стиль, вы можете перебирать ключи и значения в

node.style

Если вы хотите получить весь вычисляемый стиль элемента, а не только CSS, примененный в атрибуте style, прочитайте эту статью о вычисляемых и каскадных стилях.

Answer 4

Я не уверен, что, если честно, вы можете просто получить "все" свойства CSS с помощью JavaScript, вы можете взглянуть на [DOMNode].currentStyle, [DOMNode].style и document.defaultView.getComputedStyle thingamajiggy. Они должны содержать «текущий» стиль, который у них был. Затем вы можете получить массив всех свойств CSS, которые вы хотите протестировать, и просто просмотреть их через собственную функцию, которая получает свойство CSS для всего, используя вышеупомянутые методы (в зависимости от того, какой браузер). Я обычно сначала пробую DOMNode.style[property], так как это «встроенный» javascript и всегда управляет всем, затем я нюхаю, если браузер использует метод .currentStyle или .getComputedStyle, и использую правильный.

Это не идеально, и вам может потребоваться очистить некоторые вещи (высота: авто; до фактической текущей высоты, некоторые браузеры могут возвращать цвета RGB вместо HEX) и т. Д.

Итак, да, я не знаю ничего готового, что вы можете использовать в Javascript.

Answer 5

Вы можете попробовать for (property in objName) оператор, как видно здесь .

Answer 6

Если вы хотите использовать текущие стили для элемента, посмотрите на getComputedStyle(), но если вы хотите наследования, вам, возможно, придется реализовать каскад стилей. Firebug довольно много работает за кулисами, чтобы генерировать то, что вы видите!