offsetTop、offsetLeft、offsetWidth、offsetHeight

最新推荐文章于 2022-05-08 23:22:37 发布
最新推荐文章于 2022-05-08 23:22:37 发布
阅读量109 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery ASP HTML C C++ ViewUI
如果想更好的了解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>
dyunlong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页
10-30
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中，offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的，它们都是关于位置定位...
浅析offsetLeft,Left,clientLeft之间的区别
09-04
`offsetWidth`和`offsetHeight`则分别提供元素的总宽度和高度，包括内边距，但不包括外边距和滚动条。 其次，`left`属性是CSS中定位属性的一部分，用于设置或获取元素的左边缘距离其包含块（通常是最接近的定位祖先...
offsetHeight和offsetTop等属性用法
weixin_30556161的博客
04-24 193
转自：http://blog.csdn.net/q67982154/article/details/51611989 offsetHeight和offsetTop等属性用法 又是这图，不错又是这图.... 一.offsetTop属性:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属...
javascript之offsetHeight/offsetWidth
benben0729的专栏
07-09 407
element.offsetHeight（element.offsetWidth） 是一个只读属性，它返回了该元素的像素高度，包含了边框和内边距（垂直方向），并且返回的是一个整数。如果存在且渲染的话，不包含:before或:after等伪类元素的高度。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&...
offsetwidth/offsetheight的区别
LHJBK的博客
08-03 773
1. 2. 小小总结一小下" alt="clientWidth/scrollWidth/offsetWidth 小小总结一小下" src="http://s12.sinaimg.cn/bmiddle/61352f21g70edab9ef07b&690" style="margin:0px; padding:0px; border:0px; list-style:none">
js的offsetleft属性的用法
混世小妲己
05-08 1万+
obj.offsetleft, 此属性是只读的，不能够赋值 此属性可以返回当前元素距离某个父辈元素左边缘的距离： 如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。 如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。 实例一：有定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http:/
offsetWidth与offsetLeft
热门推荐
willard_cui的博客
08-16 7万+
1、offsetWidth: 为元素的width+元素的padding+边框的宽度 如图： 2、offsetLeft、offsetTop、offsetRight、offsetBottom 以offsetLeft为例进行说明，在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：（测试所用的浏览...
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
10-15
- `offsetTop`和`offsetLeft`分别表示元素距离其最近已定位父元素（offsetParent）的上边界和左边界的距离。如果没有定位的父元素，它们会返回到body顶部和左边的距离。 3. `scrollWidth`和`scrollHeight`： - `...
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
10-30
**offsetWidth** 和 **offsetHeight** 用于获取元素的总宽度和总高度，包括所有内容、内边距（padding）、边框（border），但不包括外边距（margin）。 - **offsetWidth**: 获取元素相对于版面或由父坐标 `...
Js中_关于top、clientTop、scrollTop、offsetTop
08-18
offsetTop 和 offsetLeft 是两个重要的属性，它们返回元素相对于其上层元素的偏移量。offsetTop 返回元素的上边缘与其上层元素的上边缘之间的距离，而 offsetLeft 返回元素的左边缘与其上层元素的左边缘之间的距离。...
js获取控件位置以及不同浏览器中的差别介绍
12-01
`offsetTop` 和 `offsetLeft` 是JavaScript中两个非常重要的属性，它们分别表示一个元素相对于其offsetParent元素（通常是包含该元素的最近的块级元素）的顶部和左侧的距离，单位为像素。例如，如果我们有一个名为`...
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
11-27
对于元素的宽度和高度，可以使用`element.offsetWidth`和`element.offsetHeight`。这两个属性包含了元素自身的宽高，以及内边距和边框的尺寸。在所有主流浏览器中，这两个属性是安全使用的。 元素的偏移属性用于...
js实现碰撞检测特效代码分享
11-28
它接受两个对象（在这个例子中是`divA`和`divB`）作为参数，通过获取它们的`offsetLeft`, `offsetTop`, `offsetWidth`和`offsetHeight`属性来确定它们的边界。然后，通过比较边界判断是否发生重叠。如果`divA`的右边...
JS获取各种宽度、高度的简单介绍
12-10
有时候项目中会用到用js获取元素位置来定位元素，首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。 JS获取各种宽度、高度的简单介绍： scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取...
Js中关于top、clientTop、scrollTop、offsetTop.pdf
09-27
五、offsetLeft、offsetWidth、offsetHeight 属性 offsetLeft 属性用于获取 HTML 元素相对于其父元素的左边缘的距离。offsetWidth 属性用于获取 HTML 元素的宽度。offsetHeight 属性用于获取 HTML 元素的高度。这些...
CSSOM视图模式(CSSOM View Module)相关整理：scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别...
weixin_30455365的博客
05-26 526
转：http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/ 四、元素视图属性 关于元素大小位置等信息的一些属性。有：c...
javascript的offsetLeft表示什么
Java_coder_guan的博客
04-18 880
可以理解成该盒模结构的左边离定义好的外盒模左边的距离
区块的边距中offsetLeft 和style.left 的区别
一路有你
02-19 351
在网页布局中经常需要获取一个元素的边距，js中提供了2种属性：offsetLeft 和style.left  offsetLeft 是获取子元素相对于父元素的左边距  style.left 则是设置或获取具有定位属性的父元素的子元素距其父元素的距离 其对应的数值是相同的，主要不同点在于对于操作者的权限上 根据其定义可知其不同点在于：   1.offsetLeft是只读的，是人为无法修改的
offsetheight
最新发布
08-16
- *1* *2* [一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）](https://blog.csdn.net/sinat_41212418/article/details/121089955)[target="_blank" data-report-click={"spm":"1018.2226....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值