offsetTop、offsetLeft、offsetWidth、offsetHeight

最新推荐文章于 2025-06-20 09:07:19 发布

最新推荐文章于 2025-06-20 09:07:19 发布 · 136 阅读

文章标签：

#jQuery #ASP #HTML #C #C++ #ViewUI

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文通过一个具体实例解释了offsetTop、offsetLeft、offsetWidth及offsetHeight等属性的作用。这些属性可以帮助开发者更好地掌握元素的位置与大小，尤其是在使用jQuery进行网页布局调整时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果想更好的了解offsetTop、offsetLeft、offsetWidth、offsetHeight，可以参考
[url]http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp[/url]


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