CODEWITHSUNDEEP
c#htmlcssloops
Meysam
Meysam

Reputation: 18157

How determine css text of each node in html

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)

Upvotes: 0

Views: 1716

Answers (6)

CharlesLeaf
CharlesLeaf

Reputation: 3201

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, yes, I don't know of anything prefab that you can use in Javascript.

Upvotes: 0

Myles
Myles

Reputation: 21510

You can try for (property in objName) operator as seen here.

Upvotes: 0

mohsen asfia
mohsen asfia

Reputation: 36

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.

Upvotes: 0

mohsen asfia
mohsen asfia

Reputation: 36

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.

Upvotes: 1

Annie
Annie

Reputation: 6631

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.

Upvotes: 0

DMI
DMI

Reputation: 7191

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!

Upvotes: 0

Related Questions