如果想更好的了解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>
- 大小: 11.7 KB
分享到：
相关推荐
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中，offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的，它们都是关于位置定位...
### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中，处理页面布局和滚动效果时经常会用到一些DOM属性，如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...
offsetTop 和 offsetLeft 是两个重要的属性，它们返回元素相对于其上层元素的偏移量。offsetTop 返回元素的上边缘与其上层元素的上边缘之间的距离，而 offsetLeft 返回元素的左边缘与其上层元素的左边缘之间的距离。...
五、offsetLeft、offsetWidth、offsetHeight 属性 offsetLeft 属性用于获取 HTML 元素相对于其父元素的左边缘的距离。offsetWidth 属性用于获取 HTML 元素的宽度。offsetHeight 属性用于获取 HTML 元素的高度。这些...
除了offsetLeft和offsetTop外，offsetWidth和offsetHeight也是JavaScript中非常重要的属性。它们分别用于获取元素的宽度和高度。这些属性在进行页面布局时非常有用，特别是在动态计算元素的位置和大小时。 6. ...
### 对offsetLeft,offsetTop,scrollLeft,scrollTop几个方法的理解 在前端开发中，了解DOM元素的位置、大小以及滚动情况是非常重要的。`offsetLeft`, `offsetTop`, `scrollLeft`, `scrollTop`等属性可以帮助我们更好...
bigImg.style.top = -mask.offsetTop * (bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight) + "px"; } // 小图上移动遮罩 small.addEventListener('mousemove', move); ``` - ...
`offsetWidth`和`offsetHeight`则分别提供元素的总宽度和高度，包括内边距，但不包括外边距和滚动条。 其次，`left`属性是CSS中定位属性的一部分，用于设置或获取元素的左边缘距离其包含块（通常是最接近的定位祖先...
当涉及到页面布局和元素定位时，我们需要理解几个重要的属性：offsetTop、offsetLeft、offsetWidth、offsetHeight、clientWidth、clientHeight、clientTop、clientLeft、getBoundingClientRect。下面我们来详细解释...
首先，`offset`属性主要包含`offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight`等，它们提供了元素相对于其最近的定位祖先元素（或包含块）的边界信息： 1. `offsetTop`: 表示当前元素的上边缘与其直接定位...
此外，在 HTML 文档中，我们还可以使用其他属性来获取元素的坐标，例如 offsetWidth 和 offsetHeight 属性可以获取元素的宽度和高度，而 clientWidth 和 clientHeight 属性可以获取元素的可见宽度和高度。...
**offsetWidth** 和 **offsetHeight** 用于获取元素的总宽度和总高度，包括所有内容、内边距（padding）、边框（border），但不包括外边距（margin）。 - **offsetWidth**: 获取元素相对于版面或由父坐标 `...
总结一下，`scrollLeft`、`scrollTop`、`offsetTop`、`offsetLeft`、`clientHeight`、`offsetHeight`和`scrollHeight`是Web开发中的核心属性，它们帮助开发者精确控制和响应网页元素的滚动和布局，是构建交互性更强...
- `offsetTop` 和 `offsetLeft` 分别表示元素相对于其最近已定位祖先元素（offsetParent）的顶部和左侧的距离，如果没有定位祖先，则相对于body的顶部和左侧。 3. **scrollWidth和scrollHeight** - `scrollWidth`...
假设有一个HTML元素obj，它具有offsetTop和offsetLeft属性，分别表示该元素相对于页面的位置，以及offsetWidth和offsetHeight属性，表示元素自身的尺寸。offsetWidth和offsetHeight与元素的style.width和style....
`offset`属性主要包括`offsetLeft`、`offsetTop`、`offsetWidth`和`offsetHeight`四个主要部分。 1. `offsetLeft`：返回元素相对于其最近的具有定位（position不为static）的父元素左边框的距离，即元素左边缘到父...
`offsetHeight` 和 `offsetWidth` 则分别表示元素的高度和宽度。 在提供的实例中，定义了一个名为`getXY`的函数，它接收一个参数`Obj`，即我们想要获取位置信息的元素对象。这个函数的核心是一个`for`循环，其目的...