Copying the style object from one object to another

Discussion in 'Javascript' started by Sparhawk, Aug 28, 2004.

  1. Sparhawk

    Sparhawk Guest

    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
    Sparhawk, Aug 28, 2004
    #1
    1. Advertising

  2. On 28 Aug 2004 12:28:51 -0700, 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.


    [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.
    Michael Winter, Aug 29, 2004
    #2
    1. Advertising

  3. Sparhawk

    Harag Guest

    On 28 Aug 2004 12:28:51 -0700, (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.
    Harag, Aug 29, 2004
    #3
  4. Sparhawk

    Harag Guest

    On 28 Aug 2004 12:28:51 -0700, (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>
    Harag, Aug 29, 2004
    #4
  5. On Sun, 29 Aug 2004 09:58:44 +0100, Harag
    <> 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.
    Michael Winter, Aug 29, 2004
    #5
  6. Sparhawk

    Harag Guest

    On Sun, 29 Aug 2004 09:15:10 GMT, "Michael Winter"
    <> wrote:

    >On Sun, 29 Aug 2004 09:58:44 +0100, Harag
    ><> 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.
    Harag, Aug 29, 2004
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    2
    Views:
    1,403
    Kevin Spencer
    Nov 21, 2003
  2. Replies:
    1
    Views:
    788
    Bertilo Wennergren
    Nov 24, 2003
  3. Gactimus
    Replies:
    12
    Views:
    803
    Chris \( Val \)
    Nov 18, 2004
  4. bobb
    Replies:
    0
    Views:
    352
  5. Ken Varn
    Replies:
    0
    Views:
    443
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page