...

View Full Version : set Style Attribute in Nodes



Garadon
01-17-2004, 11:47 AM
I got this code



Div= document.createElement("div");
Table= document.createElement("table");
Table.setAttribute("style","width:100px;height:100px;background-color : #708090;");
Table.setAttribute("bgColor","#708090");
tr=document.createElement("tr");
td=document.createElement("td");
text=document.createTextNode(aText);
myTableBody = document.createElement("TBODY")
td.appendChild(text);
tr.appendChild(td);
myTableBody.appendChild(tr);
Table.appendChild(myTableBody);
Div.appendChild(Table);

document.getElementsByTagName('body').item(0).appendChild(Div);


Now it all works fine with the exception of the


Table.setAttribute("style","width:100px;height:100px;background-color : #708090;");


so I was wondering how do I set the style attribute in the table node?

liorean
01-17-2004, 12:04 PM
The style attribute is a bit of a special case, because if isn't really an attribute, it is a style rule, and thus behaves as a style rule instead of as an attribute. You should use
[object DOMElement].style.cssProperty=[string CSSPropertyValue];where the identifier cssProperty is a CSS property in camelCase. CamelCase means that instead of using a hyphen to separate the parts of the identifier, you capitalise the first letter after where the hyphen would have been. Thus:
CSS JavaScript
---- ----
z-index zIndex
-moz-opacity MozOpacity
background-image backgroundImageFor a full list of the [CSS2] properties you can use, see <http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSS2Properties>.

Garadon
01-17-2004, 01:02 PM
ty very much, ofcourse they would have used a different syntax instead of letting people set it as an attribute :P.

now I got another questions though why won't these 2 line work?

Table.style.borderWidth="11px";
Table.style.borderColor="#FF0000";

liorean
01-17-2004, 01:14 PM
Does it still not work if you also set
Table.style.borderStyle='solid';?

Garadon
01-17-2004, 01:32 PM
yup it does ty again :)

JB1
10-27-2009, 03:19 PM
Why wont this work:
div1.style.width = "42%";
div1.style.float="left";
div2.style.width = "42%";
div2.style.float="left";
?
cssFloat dont work either:
div1.style.width = "42%";
div1.style.cssFloat="left";
div2.style.width = "42%";
div2.style.cssFloat="left";
!

abduraooft
10-27-2009, 03:35 PM
Why wont this work:
div1.style.width = "42%";
div1.style.float="left";
div2.style.width = "42%";
div2.style.float="left";
?How do we know without providing something testable? It'd be better for you to start a new thread rather than posting under a very old thread.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum