Reading accumulated style for an element

[Joe]

Hi,

This may seem like a strange thing to want to do, but here goes ...

Given an arbitrary element in an HTML page (eg. <td id="bob">...), is
there a method I could use to fetch the accumulated style that is
currently being applied to that tag?

I then want to apply that overall style to another tag (as I'm lifting
the HTML contained within the identified tag and transplanting it to
another, and want to dynamically carry over the style so it ends up
looking the same).

Incidentally, this only needs to work on IE6+.

 

[Bas Cost Budde]

Hi,

This may seem like a strange thing to want to do, but here goes ...

Given an arbitrary element in an HTML page (eg. <td id="bob">...), is
there a method I could use to fetch the accumulated style that is
currently being applied to that tag?

I then want to apply that overall style to another tag (as I'm lifting
the HTML contained within the identified tag and transplanting it to
another, and want to dynamically carry over the style so it ends up
looking the same).

Incidentally, this only needs to work on IE6+.

getComputedStyle comes to mind, is that IE? (shuffles stuff around and
finds The Bible: Dynamic HTML by Danny Goodman, O'Reilly & Associates,
ISBN 0-596-00316-1) No. IE uses currentStyle. If you want only
explicitly assigned properties, use runtimeStyle (windows version only).

 

[Steve van Dongen]

Hi,

This may seem like a strange thing to want to do, but here goes ...

Given an arbitrary element in an HTML page (eg. <td id="bob">...), is
there a method I could use to fetch the accumulated style that is
currently being applied to that tag?

Use currentStyle instead of style.
<URL:
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/currentstyle.asp
/>

I then want to apply that overall style to another tag (as I'm lifting
the HTML contained within the identified tag and transplanting it to
another, and want to dynamically carry over the style so it ends up
looking the same).

Incidentally, this only needs to work on IE6+.

Maybe
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
for ( var style in element1.currentStyle )
element2.runtimeStyle[style] = element1.currentStyle[style];

Regards,
Steve

 

[Pieter Van Waeyenberge]

you can easily loop through everything in the style object and look for what
you need .. i think for ns youll need the prop CSSText or something, anyway:

heres the loop:
it gets your 'TD id=bob' and then builds a string of all style info for bob
and then dumps in a form.textarea

var myObj = document.getElementById('bob')

for (i in myObj.style){
foo += i;
foo += ': ';
foo += this.style;
foo += '\n';
}
document.forms[0].elements[0].value = foo;

<textarea></textarea>

PIeter.

 

[Joe]

Excellent - thanks very much for all the replies.

 

[Lasse Reichstein Nielsen]

Given an arbitrary element in an HTML page (eg. <td id="bob">...), is
there a method I could use to fetch the accumulated style that is
currently being applied to that tag?

There are two ways: The standard way and IE's way

In IE, the element has a "currentStyle" property, i.e.,
document.getElementById("bob").currentStyle

The standard way is more convoluted. There, you do:
document.defaultView.getComputedStyle(document.getElementById("bob"),"")
(the "" at the end could also be, e.g., "after" to get the properties of
#bob:after {color:red;}
There is no corresponding feature for IE)

Mozilla/Gecko and Opera 7.2 implements the standard way. I don't know
if there are others.

Incidentally, this only needs to work on IE6+.

So, you can get away with only using currentStyle.

/L