offsetTop、offsetLeft、offsetWidth、offsetHeight

如果想更好的了解offsetTop、offsetLeft、offsetWidth、offsetHeight,可以参考
http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
	font-size: 12px;
}
#outter {
	border: 10px solid black;
	width: 800px;
	height: 500px;
	background-color: #B7CBE1;
	margin: 10px;
	padding: 10px;
}
#inner {
	border: 10px solid red;
	width: 400px;
	height: 250px;
	background-color: #03B3DE;
	margin: 10px;
	padding: 10px;
}
</style>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
jQuery(function() {
	var parentT = jQuery("#outter")[0].offsetParent.offsetTop;
	var outterT = jQuery("#outter")[0].offsetTop;
	var innerT = jQuery("#inner")[0].offsetTop;
	jQuery("#inner").append("parentT="+parentT+"(不包括边框)<br/>"
		+ "outterT="+outterT+"(不包括边框)<br/>"
		+ "innerT="+innerT+"(不包括边框)<br/><hr>");	
		
	var parentW = jQuery("#outter")[0].offsetParent.offsetWidth;
	var outterW = jQuery("#outter")[0].offsetWidth;
	var innerW = jQuery("#inner")[0].offsetWidth;
	jQuery("#inner").append("parentW="+parentW+"(不包括滚动条宽度)<br/>"
		+ "outterW="+outterW+"(包括边框)<br/>"
		+ "innerW="+innerW+"(包括边框)<br/>");
});
</script>
</head>
<body>
<div id="outter">
<div id="inner">
这是内容<br/>
</div>
</div>
</body>
</html>

你可能感兴趣的:(html,jquery,C++,c,asp)