How determine css text of each node in html

Question

How can I iterate over HTML nodes of a web page and get the CSS Text of each node in it? I need something like what Firebug is doing, if you click on a Node, it gives you complete list of all CSS Texts associated with that Node (even inherited styles).

My main problem is not actually iterating over HTML nodes. I am doing it with Html Agility Pack library. I just need to get complete CSS for each node.

p.s. I am sorry, I should have explained that I want to do this in C# (not javascript)

Answer 1

If you want the current styles for an element, look into getComputedStyle(), but if you want the inheritance too then you may have to implement the style cascade. Firebug does quite a lot of work behind the scenes to generate what you see!

Answer 2

You can try the in for...in operator as seen here.

Answer 3

I'm not sure if you can simply get "all" CSS properties using JavaScript to be honest, you could look into the "[DOMNode].currentStyle", "[DOMNode].style" and "document.defaultView.getComputedStyle" thingamajiggy's. They should contain the 'current' style they had. What you could then do is have an array of all CSS properties you want to test and simply loop them through a function of your own that gets the CSS property for everything using forementioned methods (depending on which browser). I usually attempt the "DOMNode.style[property]" first as this is "inline" javascript and always rules over everything, then I sniff if the browser uses the currentStyle method or getComputedStyle and use the correct one.

It's not perfect and you might need to clean up some things (height: auto; to the actual current height, some browsers might return RGB colours instead of HEX) etc.

So, yeah.. I don't know of anything prefab that you can use in Javascript.

Answer 4

You can get the CSS text from the style attribute like this:

node.getAttribute('style')

Or if you want style you can iterate through the keys and values in

node.style

If you want to grab the entire computed style of the element and not just the CSS applied in the style attribute, read this article on computed and cascaded styles.

Answer 5

You can use WebBrowser control in C# to access the htm document object and cast its body tag as following:

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

But before that you should add com refrence: MSHTML to you project. here you could access body.currentStyle that show you all its styles that might be css or inline styles.

But still I have a question here. my solution above works on body tag but I can't retrieve and cast its child nodes and iterate on dom tree because I can't cast its 'childNodes' property or 'children' property to an appropriate type, could anyone please help me on casting one of these properties?

thank you

Answer 6

I found the following code snippet useful for all element in the page and 'CurrentStyle' property of them shows their computed style:

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;

Note that according to my prev post axWebBrowser1 is a WebBrowser control.