Copying the style object from one object to another

S

Sparhawk

I got two div tags. One is hardcoded, one is created on the page using
javascript.
I want the dynamically created DIV to have the same style settings
(except for two which I will change afterwards) as the static one.

I tried

staticDiv = document.GetElementById("staticdiv");
dynDiv = document.GetElementById("dyndiv");
dynDiv.style = staticDiv.style

This does not work, because the style object has a getter but not a
setter (i.e. is readonly). This is at least the case for FireFox.

I can copy the style members one by one:

dynDiv.style.width = staticDiv.style.width

and would do so if there were only four or so.

Is there any easy JavaScript way to copy all members of style?
Something like
foreach(style in dynDiv.style)....?

Thanks,
Kay
 
M

Michael Winter

I got two div tags. One is hardcoded, one is created on the page using
javascript.
I want the dynamically created DIV to have the same style settings
(except for two which I will change afterwards) as the static one.
[snip]

Is there any easy JavaScript way to copy all members of style?
Something like
foreach(style in dynDiv.style)....?
Click to expand...

Use a class selector and a assign the new DIV that class name.

var dyndiv;
if(document.getElementById) {
dyndiv = document.getElementById('dyndiv');
if(dyndiv) {dyndiv.className = 'yourClass';}
}

Hope that helps,
Mike
 
H

Harag

I got two div tags. One is hardcoded, one is created on the page using
javascript.
I want the dynamically created DIV to have the same style settings
(except for two which I will change afterwards) as the static one.

I tried

staticDiv = document.GetElementById("staticdiv");
dynDiv = document.GetElementById("dyndiv");
dynDiv.style = staticDiv.style

This does not work, because the style object has a getter but not a
setter (i.e. is readonly). This is at least the case for FireFox.

I can copy the style members one by one:

dynDiv.style.width = staticDiv.style.width

and would do so if there were only four or so.

Is there any easy JavaScript way to copy all members of style?
Something like
foreach(style in dynDiv.style)....?

Thanks,
Kay
Click to expand...


how about using a CSS class name in the original DIV then when you
create the 2nd one set its classname to the same.

dynDiv.style.classname = staticDiv.style.classname

(untested)

hth.

al.
 
H

Harag

I got two div tags. One is hardcoded, one is created on the page using
javascript.
I want the dynamically created DIV to have the same style settings
(except for two which I will change afterwards) as the static one.

I tried

staticDiv = document.GetElementById("staticdiv");
dynDiv = document.GetElementById("dyndiv");
dynDiv.style = staticDiv.style

This does not work, because the style object has a getter but not a
setter (i.e. is readonly). This is at least the case for FireFox.

I can copy the style members one by one:

dynDiv.style.width = staticDiv.style.width

and would do so if there were only four or so.

Is there any easy JavaScript way to copy all members of style?
Something like
foreach(style in dynDiv.style)....?

Thanks,
Kay
Click to expand...


eg:

<!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function changeClass() {
var i1=document.getElementById("id1");
var i2=document.getElementById("id2");
i1.className = i2.className;

}

</script>

<style type="text/css">
..tst1{background: #CC0; height:150px; width:150px; padding: 5px 5px
5px 5px;}
..tst2{background: #0CD; height:100px; width:100px; padding: 5px 5px
5px 5px;}
</style>
</head>
<body>

<p id="id1" class="tst1">this is a test</p>
<p id="id2" class="tst2">this is a test</p>

<input type="button" value="click me" onclick="changeClass();">

</body>
</html>
 
M

Michael Winter

On Sun, 29 Aug 2004 09:58:44 +0100, Harag

[snip]
dynDiv.style.classname = staticDiv.style.classname
Click to expand...

The className property (note the capital N), is a direct property of the
element, not the style object.

Just so you know. :)

Mike
 
H

Harag

On Sun, 29 Aug 2004 09:58:44 +0100, Harag

[snip]
dynDiv.style.classname = staticDiv.style.classname
Click to expand...

The className property (note the capital N), is a direct property of the
element, not the style object.

Just so you know. :)

Mike
Click to expand...

LOL, Thanks, I wasn't sure I was 100% right but I was thinking along
the right lines, so I went and tested it... hence the 2nd post. This
sort of things happen when a learner helps another learner :)

Al.
 

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

Similar Threads

Generate one HTML from API based on the object key language and their value 2
How to paste n+1 every single time without copying new line from excel 3
How to paste n+1 every single time without copying new line from excel 0
Only one table shows up with the information 2
How to have two html audio players on one page? 0
passing width in <div> style to javascript 10
How to display input options only after selecting an option from the 'select class' tag JS? 6
JavaScript: how to keep track of the circle in canvas on specific path? 0

Members online

No members online now.
Total: 26 (members: 0, guests: 26)
Robots: 459

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top