By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,504 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,504 IT Pros & Developers. It's quick & easy.

Copying the style object from one object to another

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
On 28 Aug 2004 12:28:51 -0700, Sparhawk <Ka************@gmx.de> wrote:
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)....?


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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #2

P: n/a
On 28 Aug 2004 12:28:51 -0700, Ka************@gmx.de (Sparhawk) wrote:
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

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.
Jul 23 '05 #3

P: n/a
On Sun, 29 Aug 2004 09:58:44 +0100, Harag
<ha**********************@softhome.net> wrote:

[snip]
dynDiv.style.classname = staticDiv.style.classname


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

Just so you know. :)

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4

P: n/a
On 28 Aug 2004 12:28:51 -0700, Ka************@gmx.de (Sparhawk) wrote:
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

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>
Jul 23 '05 #5

P: n/a
On Sun, 29 Aug 2004 09:15:10 GMT, "Michael Winter"
<M.******@blueyonder.co.invalid> wrote:
On Sun, 29 Aug 2004 09:58:44 +0100, Harag
<ha**********************@softhome.net> wrote:

[snip]
dynDiv.style.classname = staticDiv.style.classname


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

Just so you know. :)

Mike


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.

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.