`
edison87915
  • 浏览: 199416 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

offsetTop、offsetLeft、offsetWidth、offsetHeight剖析[转]

 
阅读更多

 <原文地址：http://blog.sina.com.cn/s/blog_995c1f630101aba4.html>

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null 。

句法：
parentObj = element.offsetParent
变量：
parentObj 是一个元素的引用，当前元素的偏移量在其中计算。
规范：
DOM Level 0. 并非规范的一部分.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementByIdx_x_x_x("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="offset_init()">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</body>

测试结果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY"
结论：当某个元素及其父元素都未进行CSS定位时，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算 （offsetTop、offsetLeft等）的参照物为Body元素。（其实无论是标准兼容模式还是怪异模式，根元素都为Body元素）

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#parent{
position:absolute;
<!--position：relative;-->
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementByIdx_x_x_x("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="offset_init()">
<div id="parent">div测试代码<p id="sonObj">测试OffsetParent属性</p></div>
</body>
</html>

 测试结果：
Firefox3："DIV"
Internet Explorer 7："DIV"
Opera 9.51："DIV"
Chrome 0.2："DIV"
Safari 3："DIV"
结论：
当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素.

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#Grandfather{
position:relative;
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementByIdx_x_x_x("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="offset_init()">
<h1 id="Grandfather">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</h1>
</body>
</html>

 

 

测试结果：
Firefox3："H1"
Internet Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
Safari 3："H1"
结论：
当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#sonObj{
position:relative;
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementByIdx_x("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="offset_init()">
<h1 id="Grandfather">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</h1>
</body>
</html>

 

 

测试结果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY"
结论：
当只有某个元素进行了CSS定位，其父元素及其DOM结构层次上都未进行CSS定位时，则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。

 

 

element.offsetLeft属性

支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定义：返回一个像素数值，它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量。
句法：
leftDis = element.offsetLeft
offsetLeft属性在Internet Explorer中的实现存在Bug，无论当前元素的offsetParent属性取值如何，它总是以Body元素为参照物来计算offsetLeft。幸运的是，这个Bug在Intern Explorer 8 Beta 1中已经修复。仍然需要注意，IE会从Body元素的Left-Border为标准开始计算OffsetLeft，而其他的浏览器将从Left-Margin开始计算。

......即使在IE中，offsetParent不是Body元素，offsetLeft的计算也以Body元素为标准。......

 

offsetTop属性


支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定义：
返回一个数值，指明了当前元素的上边缘到其offsetTop属性返回的对象的上边缘的距离。
句法：
topDis = element.offsetTop
前面对于offsetLeft的Bug也存在于offsetTop属性中，同样，这个Bug在IE 8 Beta 1中也已经修复。

图三：在IE7及以下版本中，offsetsetTop属性的Bug。
当然也不要在内联标签内嵌入标签，因为WebKit内核浏览器会错误解释offsetParent属性。


offsetWidth属性


支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定义：
当前元素的宽度。
句法：
elementWidth = element.offsetWidth
需要指出的是，offsetWidth属性所指的宽度是当前元素的width+padding+border+margin的总和。


offsetHeight属性


支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定义：
当前元素的高度。
句法：
elementHeight = element.offsetHeight
同样，offsetWidth属性所指的高度是当前元素的Height+padding+border+margin的总和。
以上所说的四个属性再加上上一篇文章的offsetParent属性其实都不是Dom规范的一部分，但是目前的浏览器都实现了它们，这几个属性也是实现Javascript拖拽功能的核心元素。因此一定要深入理解它们。

分享到：
| Jquery中的offset()和position()深入剖析[ ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中，offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的，它们都是关于位置定位...

    JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    ### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中，处理页面布局和滚动效果时经常会用到一些DOM属性，如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...

    Js中_关于top、clientTop、scrollTop、offsetTop

    offsetTop 和 offsetLeft 是两个重要的属性，它们返回元素相对于其上层元素的偏移量。offsetTop 返回元素的上边缘与其上层元素的上边缘之间的距离，而 offsetLeft 返回元素的左边缘与其上层元素的左边缘之间的距离。...

    Js中关于top、clientTop、scrollTop、offsetTop.pdf

    五、offsetLeft、offsetWidth、offsetHeight 属性 offsetLeft 属性用于获取 HTML 元素相对于其父元素的左边缘的距离。offsetWidth 属性用于获取 HTML 元素的宽度。offsetHeight 属性用于获取 HTML 元素的高度。这些...

    详解 javascript中offsetleft属性的用法

    除了offsetLeft和offsetTop外，offsetWidth和offsetHeight也是JavaScript中非常重要的属性。它们分别用于获取元素的宽度和高度。这些属性在进行页面布局时非常有用，特别是在动态计算元素的位置和大小时。 6. ...

    对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    ### 对offsetLeft,offsetTop,scrollLeft,scrollTop几个方法的理解 在前端开发中，了解DOM元素的位置、大小以及滚动情况是非常重要的。`offsetLeft`, `offsetTop`, `scrollLeft`, `scrollTop`等属性可以帮助我们更好...

    浅析offsetLeft,Left,clientLeft之间的区别

    `offsetWidth`和`offsetHeight`则分别提供元素的总宽度和高度，包括内边距，但不包括外边距和滚动条。 其次，`left`属性是CSS中定位属性的一部分，用于设置或获取元素的左边缘距离其包含块（通常是最接近的定位祖先...

    【JavaScript源代码】JavaScript实现商品放大镜效果.docx

    bigImg.style.top = -mask.offsetTop * (bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight) + "px"; } // 小图上移动遮罩 small.addEventListener('mousemove', move); ``` - ...

    js中的scroll和offset 使用比较的实例与分析.docx

    首先，`offset`属性主要包含`offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight`等，它们提供了元素相对于其最近的定位祖先元素（或包含块）的边界信息： 1. `offsetTop`: 表示当前元素的上边缘与其直接定位...

    js获取元素相对窗口位置的实现代码

    当涉及到页面布局和元素定位时，我们需要理解几个重要的属性：offsetTop、offsetLeft、offsetWidth、offsetHeight、clientWidth、clientHeight、clientTop、clientLeft、getBoundingClientRect。下面我们来详细解释...

    js获取页面控件坐标.pdf

    此外，在 HTML 文档中，我们还可以使用其他属性来获取元素的坐标，例如 offsetWidth 和 offsetHeight 属性可以获取元素的宽度和高度，而 clientWidth 和 clientHeight 属性可以获取元素的可见宽度和高度。...

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

    **offsetWidth** 和 **offsetHeight** 用于获取元素的总宽度和总高度，包括所有内容、内边距（padding）、边框（border），但不包括外边距（margin）。 - **offsetWidth**: 获取元素相对于版面或由父坐标 `...

    js中的scroll和offset 使用比较的实例与分析

    首先，我们来看offsetTop和offsetLeft属性。offsetTop属性表示的是当前对象到其上级层顶部的距离，而offsetLeft属性表示的是当前对象到其上级层左边的距离。这两个属性都是只读的，不能直接对它们进行赋值，如果需要...

    scrollLeft,scrollTop等等详解[定义].pdf

    总结一下，`scrollLeft`、`scrollTop`、`offsetTop`、`offsetLeft`、`clientHeight`、`offsetHeight`和`scrollHeight`是Web开发中的核心属性，它们帮助开发者精确控制和响应网页元素的滚动和布局，是构建交互性更强...

    javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    - `offsetTop` 和 `offsetLeft` 分别表示元素相对于其最近已定位祖先元素（offsetParent）的顶部和左侧的距离，如果没有定位祖先，则相对于body的顶部和左侧。 3. **scrollWidth和scrollHeight** - `scrollWidth`...

    Web前端开发技术-元素偏移量offset应用.pptx

    `offset`属性主要包括`offsetLeft`、`offsetTop`、`offsetWidth`和`offsetHeight`四个主要部分。 1. `offsetLeft`：返回元素相对于其最近的具有定位（position不为static）的父元素左边框的距离，即元素左边缘到父...

    JavaScript获取对象在页面中位置坐标的方法

    `offsetHeight` 和 `offsetWidth` 则分别表示元素的高度和宽度。 在提供的实例中，定义了一个名为`getXY`的函数，它接收一个参数`Obj`，即我们想要获取位置信息的元素对象。这个函数的核心是一个`for`循环，其目的...

Magicbox
Global site tag (gtag.js) - Google Analytics