"style" in "CreateElement"

Drunklord · 09-11-2012, 09:12 AM

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>

VIPStephan · 09-11-2012, 09:17 AM

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

devnull69 · 09-11-2012, 09:30 AM

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

Drunklord · 09-11-2012, 10:21 AM

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

devnull69 · 09-11-2012, 10:57 AM

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

Drunklord · 09-11-2012, 11:08 AM

Quote:

Originally Posted by devnull69

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