Robust, Cross-Browser setAttribute()?

[Martin Rinehart]

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',
top22*zz_top + 75) + 'px',
left22*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.

 

[Gregor Kofler]

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',
top22*zz_top + 75) + 'px',
left22*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

 

[Martin Rinehart]

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 Honnen]

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 Rinehart]

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 Honnen]

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

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

 

[David Mark]

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.)

 

[Gregor Kofler]

Martin Rinehart meinte:

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

 

[Martin Rinehart]

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.

 

[Gregor Kofler]

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

 

[Martin Rinehart]

Martin Rinehart meinte:
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.