Robust, Cross-Browser setAttribute()?

Discussion in 'Javascript' started by Martin Rinehart, Nov 23, 2008.

  1. Does anyone have a robust, cross-browser attribute setting function?

    I'm creating stuff with code like this:

    this.table = document.createElement( 'table' );
    setAttributes( this.table,
    { align:'center',
    bgcolor:'#4060ff', border:1,
    height:'50%', width:'50%' }
    );

    setAttributes( this.table.style,
    { position:'absolute',
    top:(22*zz_top + 75) + 'px',
    left:(22*zz_top + 175) + 'px',
    zIndex: zz_top }
    );

    For the handful of things I've tried, Opera on KDE, this is
    setAttributes():

    function setAttributes( obj, attrs ) {

    for ( attr in attrs ) {
    // alert( obj.toString() + '.' + attr + ' = ' + attrs[attr] );
    if ( obj.toString() === '[object CSSStyleDeclaration]' ) {
    obj[attr] = attrs[attr];
    } else {
    obj.setAttribute( attr, attrs[attr] );
    }
    } // end of for/in loop
    } // end of setAttributes()

    Not pretty. I suspect it will get uglier when I try some Windows
    browsers.
     
    Martin Rinehart, Nov 23, 2008
    #1
    1. Advertising

  2. Martin Rinehart meinte:
    > Does anyone have a robust, cross-browser attribute setting function?
    >
    > I'm creating stuff with code like this:
    >
    > this.table = document.createElement( 'table' );
    > setAttributes( this.table,
    > { align:'center',
    > bgcolor:'#4060ff', border:1,
    > height:'50%', width:'50%' }
    > );
    >
    > setAttributes( this.table.style,
    > { position:'absolute',
    > top:(22*zz_top + 75) + 'px',
    > left:(22*zz_top + 175) + 'px',
    > zIndex: zz_top }
    > );


    Why not assign the properties to the style object directly? In an
    instant all cross browser issues are gone...

    Gregor
     
    Gregor Kofler, Nov 23, 2008
    #2
    1. Advertising

  3. Conrad Lender wrote:
    > Out of curiosity, where does obj.setAttribute(attr) work better than
    > obj[attr]?


    Not reliable for attaching to table elements.
    table['width'] = '50%'; // works
    table['height'] = '50%'; // doesn't work
     
    Martin Rinehart, Nov 23, 2008
    #3
  4. Martin Rinehart wrote:
    > Conrad Lender wrote:
    >> Out of curiosity, where does obj.setAttribute(attr) work better than
    >> obj[attr]?

    >
    > Not reliable for attaching to table elements.
    > table['width'] = '50%'; // works
    > table['height'] = '50%'; // doesn't work


    But does
    table.setAttribute('height', '50%')
    have any effect? HTML 4 or XHTML 1 tables do not have a height attribute:
    http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1
    so setting that attribute should not have any effect, at least with
    browsers in strict standards compliant rendering mode.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Nov 23, 2008
    #4
  5. Martin Honnen wrote:

    > But does
    > table.setAttribute('height', '50%')
    > have any effect? HTML 4 or XHTML 1 tables do not have a height attribute:


    Yes, you get a table half as tall as the browse window.
     
    Martin Rinehart, Nov 23, 2008
    #5
  6. Martin Rinehart wrote:
    > Martin Honnen wrote:
    >
    >> But does
    >> table.setAttribute('height', '50%')
    >> have any effect? HTML 4 or XHTML 1 tables do not have a height attribute:

    >
    > Yes, you get a table half as tall as the browse window.


    No, not if the browser is in standard compliant mode.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Nov 23, 2008
    #6
  7. Martin Rinehart

    David Mark Guest

    On Nov 23, 11:34 am, Martin Rinehart <> wrote:
    > Conrad Lender wrote:
    > > Out of curiosity, where does obj.setAttribute(attr) work better than
    > > obj[attr]?

    >
    > Not reliable for attaching to table elements.
    >     table['width'] = '50%'; // works
    >     table['height'] = '50%'; // doesn't work


    That is nonsense.

    The answer is that it is required when there is no DOM property
    equivalent (e.g. certain attributes of SVG elements.)

    And it is broken as designed in IE (always has been.) In an HTML
    application, the get/setAttribute methods are virtually *never*
    needed. If you find yourself using them, stop and think why (it is
    almost certainly a mistake.)
     
    David Mark, Nov 23, 2008
    #7
  8. Martin Rinehart meinte:
    > Conrad Lender wrote:
    >> Out of curiosity, where does obj.setAttribute(attr) work better than
    >> obj[attr]?

    >
    > Not reliable for attaching to table elements.
    > table['width'] = '50%'; // works


    Tables do have a width attribute in (X)HTML strict mode.

    > table['height'] = '50%'; // doesn't work


    Tables don't have a height attribute in (X)HTML strict mode.

    I see a pattern here.

    Gregor
     
    Gregor Kofler, Nov 23, 2008
    #8
  9. I just went to my Windows machine and wrote a little test program that
    included:

    tbl.height='50%';

    Gave me a 50% tall table in Chrome, Firefox, Opera and Safari. Gave no
    table in MSIE, but that's not my problem. It surprises me that Opera
    on Win is not like Opera on KDE.
     
    Martin Rinehart, Nov 24, 2008
    #9
  10. Martin Rinehart meinte:
    > I just went to my Windows machine and wrote a little test program that
    > included:
    >
    > tbl.height='50%';
    >
    > Gave me a 50% tall table in Chrome, Firefox, Opera and Safari. Gave no
    > table in MSIE, but that's not my problem. It surprises me that Opera
    > on Win is not like Opera on KDE.


    Did you use setAttribute()? Or something like tbl.style.height? What
    doctype? Did you really use tbl.height? Since when inspecting a table
    with Firebug it has no height property for a start, and all bets are off.

    Gregor
     
    Gregor Kofler, Nov 24, 2008
    #10
  11. Gregor Kofler wrote:
    > Martin Rinehart meinte:
    > > I just went to my Windows machine and wrote a little test program that
    > > included:
    > >
    > > tbl.height='50%';
    > >

    > Did you use setAttribute()? Or something like tbl.style.height? What
    > doctype? Did you really use tbl.height? Since when inspecting a table
    > with Firebug it has no height property for a start, and all bets are off.
    >


    I used the exact statement above.
     
    Martin Rinehart, Nov 25, 2008
    #11
    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. Matt
    Replies:
    7
    Views:
    14,787
    John C. Bollinger
    Nov 8, 2004
  2. Jeff
    Replies:
    13
    Views:
    1,155
    vanilla
    Oct 6, 2007
  3. Matt Kruse
    Replies:
    0
    Views:
    131
    Matt Kruse
    Aug 15, 2006
  4. Gelonida N
    Replies:
    11
    Views:
    458
    Chris Angelico
    Jul 24, 2012
  5. Jerry Hill
    Replies:
    0
    Views:
    201
    Jerry Hill
    Jul 24, 2012
Loading...

Share This Page