CodingForums.com - "style" in "CreateElement"

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - "style" in "CreateElement" (http://www.codingforums.com/showthread.php?t=272822)

"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?:confused:

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>

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";}

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()!

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

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";

Quote:

Originally Posted by devnull69 (Post 1268922)

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 :thumbsup: