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 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    27
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question "style" in "CreateElement"

    Hi all! in "CreateElement" fails "style" attribute it just doesn`t change the "top" and the "left" of the new element.
    Another thing is that in "displayHTML" i don't see the code of the new element.
    Anyone can help me, please?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>District</title>
        <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
        <style type="text/css"></style>
    
    <script type="text/javascript" src=js/main.js></script></script>
    
    <script type="text/javascript">
    
    function CreateBuilding()
    {
      var newImage = null;
    	// Try if the IE 
    	
    	 if (navigator.appName=="Microsoft Internet Explorer")
    	   {
    		 newImage = document.createElement('<'+'img'+' id="'+'building1'+'"/>');
    		 }
    	  else
    		  {
    			newImage = document.createElement('img');
          newImage.name = "build1";
    		
    			}
    	//	newImage.setAttribute
    	newImage.setAttribute('src',"objects/Building_apartments_0.jpg");
    	newImage.setAttribute('width',"50");
    	newImage.setAttribute('height',"35");	
    	newImage.setAttribute('style',"position: absolute; left: 20px; width: 50; top: 100px; height: 35");
     
    	
    	newImage.onload="style.top:100px;"
    	document.body.insertBefore(newImage,document.body.childNodes[0]); 
    	Alert(newImage.style);
    	 
    	}	
        function displayHTML(htmlString)
    		{
          var temp = document.createElement('div');
          temp.appendChild( document.createTextNode(htmlString) );
          document.getElementById('displayBox').innerHTML = "<pre>" + temp.innerHTML + "</pre>";
        }
      </script>
    
    
    
    </head>
    <body>
    
    
    
    
    <script>
    CreateBuilding();
    </script>
     <form>
         <input type="button" onclick="displayHTML(document.body.outerHTML)" value="Click here to see HTML" />
     </form>
    	
      <div id="displayBox"></div>
    
    </body>
    
    </html>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Wow, navigator.appName? That is some ancient approach…
    But anyway, your image dimensions need a unit: width: 50px; … height: 35px. And what do you think would this newImage.onload="style.top:100px;" do? You’re assigning a string to the onload event. I think you need something like
    Code:
    newImage.onload= function() {this.style.top = "100px";}

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    And you should preferrably use the property notation instead of .setAttribute
    Code:
    newImage.src = "...";
    newImage.width = ...;
    newImage.height = ...;
    newImage.style = "position: absolute; left: 20px; width: 50px; top: 100px; height: 35px";
    Last but not least: Javascript is case sensitive. It's alert() rather than Alert()!

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    27
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Both of them do not work.

    Code:
    newImage.style = "position: absolute; left: 20px; width: 50px; top: 100px; height: 35px";
    gives error "string 33, letter 3, the member is not found" any other ways?

    thank you

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Yeah sorry my bad ... either you'll have to provide each style property in one separate line
    Code:
    newImage.style.position = "absolute";
    or you should use .cssText
    Code:
    newImage.style.cssText = "position: absolute; left: 20px; width: 50px; top: 100px; height: 35px";

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    27
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by devnull69 View Post
    or you should use .cssText
    Code:
    newImage.style.cssText = "position: absolute; left: 20px; width: 50px; top: 100px; height: 35px";
    It works thank you very mach


  •  

    Posting Permissions

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