js控制div元素在页面的位置

原创于 2009-05-15 22:10:13 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

js 专栏收录该内容

3 篇文章

订阅专栏


<html>
<head>
<title>js控制div元素在页面的位置</title>

</head>

<style type="text/css">
#a{
	background:#FF0000;
	height: 100px;
	width: 100px;
	float: left;
}
#b{
	background:#0000FF;
	height: 100px;
	width: 100px;
	float: left;
	position: absolute;
	top: 500px;
	right: 500px;

}

body {
	margin: 0px;
	padding: 10px;
}

</style>

<script language="javascript">
function ab(){

var a=document.getElementById("a"); 
var b=document.getElementById("b"); 


var bX=a.offsetLeft+a.offsetWidth;
var bY=a.offsetTop+a.offsetHeight;
b.style.top=bX+"px";
b.style.left=bY+"px";

}
</script>

<body >

<div id="a" onclick="ab()">a</div>
<div id="b"  >b</div>

</body>
</html>