Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts

    set Style Attribute in Nodes

    I got this code

    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
    Code:
    	 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?

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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
    Code:
    [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:
    Code:
    CSS                 JavaScript
    ----                ----
    z-index             zIndex
    -moz-opacity        MozOpacity
    background-image    backgroundImage
    For a full list of the [CSS2] properties you can use, see <http://www.w3.org/TR/2000/REC-DOM-Le...CSS2Properties>.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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";

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Does it still not work if you also set
    Code:
    Table.style.borderStyle='solid';
    ?
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yup it does ty again

  • #6
    JB1
    JB1 is offline
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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";
    !
    Last edited by JB1; 10-27-2009 at 03:38 PM.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by JB1 View Post
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •