Using CSSUtils for StyleRules on a DOM Element.

Nitin Hayaran

unread,

Oct 8, 2008, 3:05:36 AM10/8/08

to cssutils

Hi,

In one of my project i have to figure out STYLE RULES being applied on
a DOM Element Node.

How can this be done.
Any sample code is most welcome.

Thanks,
Nitin

see

unread,

Oct 8, 2008, 12:48:23 PM10/8/08

to cssutils

hi Nitin,
(the mail you sent directly I answer here)

You might want to check an example privided in the cssutils src
distribution http://code.google.com/p/cssutils/source/browse/trunk/examples/style.py

It is kinda crude as it was a test for this kind of work only (maybe
to be added to cssutils directly). Please let me know if that helps or
if you have better ideas.

thanks
Christof

Nitin Hayaran

unread,

Oct 9, 2008, 3:21:15 AM10/9/08

to see, cssutils

Hi Christof,

I think I didn't made my point clear.

Actually I wanted something like this.
Consider a webpage like.

<html>
<head>
<style>

body{
font-family:Arail;
font-size:12px;
color:#000;
}

.myPara{
font-size:13px;
color:#888;
}
.myPara span{
Color:#333;
}
</style>
</head>
<body>
<p class='myPara'>
<span>
Sample Text
</span>
</p>
</body>
</html>

Now what I want is to know what the font size (generated style) is on
"Sample Text"

In short I wanted to know the generated / effective style on any particular
DOM Element.

Thanks,
Nitin

see

unread,

Oct 9, 2008, 6:15:41 PM10/9/08

to cssutils

hi,
guess I did not make myself clear either ;)

I think the code in style.py does something to get to what you want.
It does generate a CSSStyleDeclaration for each element defined in the
sheet and present in the document which should contain the "generated
styles". Please try to check the code again. It is a bit convoluted
but should be clear enough.

Check the method ``getView(document, css)`` which takes a document
(here an etree.HTML object) and a stylesheet (a CSS string) and
returns a "view" containing: a dict of {DOMElement:
css.CSSStyleDeclaration} so for each DOMElement in document the
defined CSS. Or actually only for the DOMElement selected in the CSS.

I fear the referred code is the nearest of what you want (if I
understand it right): A real query functionality of a sheet applied on
an (HTML) document?

best regards
Christof

> distributionhttp://code.google.com/p/cssutils/source/browse/trunk/examples/style.py

Reply all

Reply to author

Forward