Positioning an img with javascript: it wont move
I have some javascript to set the offsetLeft attribute of an img element. But my javascript doesn't move the HTML element, what do you think I can do to make it move left? This is a scenario when it is easiest for me to position the element in javascript & not css.
The img that wont move left when it should(it displays centred) has the id "headerImg":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
body { text-align: center; min-width: 1200px; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { margin: 0 auto; }
#navBar { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; }
#content { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }
#headingImg { left: 0px; }
#navBarImg { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; }
-->
</style>
</head>
<body>
<div id="heading">
<!-- This image will not move to the left when I call the below javascript -->
开发者_Python百科 <img id="headingImg" src="images/logoWritting.png" alt="Kamalei Childrens Centre" width="600px" height="240px"/>
</div>
<div id="main">
<div id="navBar">
<img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
</div>
</div>
<img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>
<script type="text/ajavscript">
<!--
var CONTENT_WIDTH = 1000;
function getScreenSize()
{
var res = {"width": 630, "height": 460};
if ( parseInt(navigator.appVersion)>3 )
{
res["width"] = screen.width;
res["height"] = screen.height;
}
else if ( navigator.appName == "Netscape" && parseInt(navigator.appVersion)==3 && navigator.javaEnabled() )
{
var jToolkit = java.awt.Toolkit.getDefaultToolkit();
var jScreenSize = jToolkit.getScreenSize();
res["width"] = jScreenSize.width;
res["height"] = jScreenSize.height;
}
return res;
}
document.getElementById("headingImg").style.left = ((getScreenSize()['width']/2)-(CONTENT_WIDTH/2))+"px";
-->
</script>
</body>
</html>
Set the .style.left along with position:absolute, not the offsetLeft. Alternatively, change the .style.marginLeft. offsetLeft is a read-only property.
加载中,请稍侯......
精彩评论