Entry
How can I copy the inline style of one element to another?
Nov 15th, 2001 02:20
Martin Honnen,
IE5+ and NN6 support a property
cssText
for the
style
property of an element, that is you can read
elementReference.style.cssText
to access the whole text of a CSS style declaration.
With IE5+ you can read and write that property, however with NN6.2 I
didn't manage to set the property. But with NN6 it is possible to use
element.setAttribute('style', 'css declaration')
to set the complete text.
Taking that together I have the following code tested with NN6.2 and IE6:
<html>
<head>
<title>
copying inline styles
</title>
<script type="text/javascript">
function copyInlineStyle (el0Id, el1Id) {
if (document.all)
document.all[el0Id].style.cssText = document.all[el1Id].style.cssText;
else if (document.getElementById)
document.getElementById(el0Id).setAttribute('style',
document.getElementById(el1Id).style.cssText);
}
</script>
</head>
<body>
<div id="aDiv"
style="color: red; background-color: yellow;"
>Kibology</div>
<input type="button"
value="copy styles"
onclick="copyInlineStyle('a2ndDiv', 'aDiv');"
/>
<div id="a2ndDiv"
style="color: green; background-color: lightgrey;">
All for Kibology.
</div>
</body>
</html>
