Help with traversing style properties of an element.

X

X

I cannot figure this one out. I would like to traverse through and
elements styles (not class) and get a list of all properties using
javascript property names and css property names along with the
corresponding values.

I cannot figure this out, it seems like it should be easy. Everything
out there only shows when people know the property they need, nothing on
full lists. I want to be able to go through the properties and search
for settings, merge and so forth.

cssTest will not work because it modifies the values. Example on border,
it would take a 3 property border statment and merge the values into one
border statement. No good. I would like to see the raw/orignal style.

Example
<td name="frank" onclick="showit(this)"
style="padding:4px;margin:4px;color:blue">

function showit(me) {
for (var i=1; i<me.style.length-1;i++) {
alert(me.stlye);
}
}

So basically, I would just like to run through the style and get a line
by line listing of the properties with CSS names and with the JS Names.

Something like this would be nice

w3c prop name js prop name value
padding padding 4px
margin margin 4px
color color 4px
background-color bgcolor blue

Is this at all possible?

Thanks.
 
M

Mike Foster

I cannot figure this one out. I would like to traverse through and
elements styles (not class) and get a list of all properties using
javascript property names and css property names along with the
corresponding values.

...

Thanks.


Hi X :)

Here's a little toy that might illustrate what you need.
This probably only works in Gecko browsers.
For more info: http://www.mozilla.org/docs/dom/domref/dom_style_ref.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
body {
background:#ccc;
}
</style>
<link rel='stylesheet' type='text/css' href='../css/s5.css' />
<link rel='stylesheet' type='text/css' href='../css/v3.css' />
<script type='text/javascript'>

window.onload = function()
{
var i, j, r, ss, p;
var ta = document.getElementById('ta1');
ta.value = '';
for (i = 0; i < document.styleSheets.length; ++i) {
ss = document.styleSheets;
ta.value += '===' + ss.href + '\n';
for (j = 0; j < ss.cssRules.length; ++j) {
r = ss.cssRules[j++];
ta.value += r.cssText + '\n';
/* beware, the following loop may cause Moz to lockup ;-)
try it without this loop first
for (p in r.style) {
ta.value += p + '\n';
}
*/
}
}
}

</script>
</head>
<body>

<textarea id='ta1' rows='35' cols='80'></textarea>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top