在学习
offset的相关属性前，必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字
的形式返回像素值（例如，返回12，而不是'12px'）。
定位父元素：指在CSS中某一元素
domElement[position:relative/absolute]所相对定位的元素。
1、offsetParent
对于offsetParent来讲，最重要的是能够知道 domElement.offsetParent
指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。
a、domElement设置了
position:relative/absolute属性：
domElement.offsetParent指向的是该元素的定位父元素。
但也有一个bug，见一下代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
#target{position:relative;}
</style>
<scripttype="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetParent==document.documentElement); //IE中指
向<html>元素
alert(target.offsetParent==document.body); //FF、
Safari等指向<body>元素
};
</script>
</head>
<body>
<divid="outer"class="test">
<divid="inner">
<divid="target"class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
b、
domElement没有设置position:relative/absolute，即static：
这一点所有的浏览器基本相同，domElement的offsetParent指向的是离domElement最近的拥有
position:relative/absolute属性的父级元素。若不存在，则指向
<body>元素。但这种情况也有例外，如果domElement是<td>则 offsetparent
指向<table>
c、关于offsetParent的实例：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
#outer{position:absolute;}
</style>
<scripttype="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
varouter=document.getElementById('outer');
alert(target.offsetParent==outer); //true
};
</script>
</head>
<body>
<divid="outer"class="test">
<divid="inner">
<divid="target"class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
</style>
<scripttype="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetParent==document.body); //true
};
</script>
</head>
<body>
<divid="outer"class="test">
<divid="inner">
<divid="target"class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
2、
offsetLeft/Top
offsetLeft： 该元素左border的左边缘 到
该元素的offsetParent的左border内边缘的水平距离。
offsetTop：该元素的上border的上边缘 到
该元素的offsetParent的上border内边缘的垂直距离。
代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
*{margin:0px;padding:0px;}
.test{
padding:5px;
margin:10px;
color:#fff;
border:7pxsolid#000;
background-color:#CC66FF;
}
#target{
position:absolute;
left:3px;
top:9px;
width:100px;
height:100px;
}
#outer{
position:relative;
width:300px;
height:300px;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetLeft); //13=margin-10px+left-3px
};
</script>
</head>
<body>
<divid="outer"class="test">
<divid="inner">
<divid="target"class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
3、offsetWidth/offsetHeight
给出元素在页面中占据的宽度和高度的总计。注意：把元素的边框和滚动条计算在
内。
offsetWidth = border-left-width + padding-left + width
+ padding-right + border-right-width;
offsetHeight
= border-top-width + padding-top + height + padding-bottom +
border-bottom-width;
4、相关应用
a、获得一个元素的实际宽度和高度，例如：
一个自适应高度的段落，往往可以通过获得该元素CSS层叠后的最终高度【见下代码】，但是这种方法在IE中有时返回的是auto，所以使用一个元素的
offsetWidth/offsetHeight是比较理想的方法。
functiongetStyle(elem,type){
vartypeface='';
if(elem.currentStyle)
typeface=elem.currentStyle[type];
elseif(window.getComputedStyle)
typeface=window.getComputedStyle(elem,null)[type];
returntypeface;
}
获得一个元素位置的可移植的方法：在窗口中的位置
functiongetX(elem){
varx=0;
while(elem){
x=x+elem.offsetLeft;
elem=elem.offsetParent;
}
returnx;
}
functiongetY(elem){
vary=0;
while(elem){
y=y+elem.offsetTop;
elem=elem.offsetParent;
}
returny;
}
<!-- 分页 -->
<!-- 分页 -->
<!-- 分页 -->
分享到：
相关推荐
2. 通过JavaScript的计算样式方法，如obj.currentStyle或document.defaultView.getComputedStyle()，来获取元素的宽度和高度。 3. 获取完尺寸后，需要将元素的display属性和visibility属性恢复原样，以避免元素位置...
本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。 首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...
JavaScript DOM元素尺寸和位置是前端开发中非常关键的一部分，它涉及到如何准确地获取和操作HTML元素在页面上的尺寸和定位。DOM（Document Object Model）是HTML和XML文档的编程接口，它将网页结构抽象为一棵树形...
2. **MDN Web 文档**：提供了关于 `display` 和 `visibility` 的详尽解释以及 JavaScript 获取元素尺寸的方法。 3. **W3School**：提供了简单的示例和交互式演示。 通过以上方法，我们可以有效地解决获取 `display:...
本文总结了使用JavaScript获取指定元素大小、位置的几种方式。如果你用的是JQuery，则获取元素大小是非常简单的。但是我们还是有必要知道如何通过原生JavaScript来获取,需要的朋友可以参考下
本文将深入探讨JavaScript中与元素尺寸和位置相关的DOM属性，并指导如何在实际开发中正确理解和运用这些属性。 首先，需要明确几个关键的DOM属性，它们分别是offsetWidth、clientWidth、scrollWidth以及相对应的...
1. **JavaScript获取元素尺寸和位置** - `getBoundingClientRect()`: 这是JavaScript原生提供的方法，用于获取元素相对于浏览器视口的位置。返回的对象包含了`top`, `left`, `right`, `bottom`, `width`, 和 `...
这个方法返回一个对象，其中包含了`top`, `right`, `bottom`, `left`, `width` 和 `height`等属性，它们分别表示元素相对视口边界的位置和尺寸。例如，获取`input`框的绝对位置可以这样写： ```javascript var ...
在JavaScript中，有两个主要属性用于获取元素的内容尺寸：`clientHeight`和`clientWidth`。这两个属性返回元素内部的宽度和高度，包括内容区和内边距，但不包含边框和外边距。在Internet Explorer下，`clientWidth`...
- `style`: 对象可以用于获取或设置元素的行内样式，例如 `element.style.width` 可以获取元素的宽度。 - `window.getComputedStyle()`: 这个函数返回元素的计算样式，包括浏览器根据CSS规则计算出的实际值，适用...
【JavaScript DOM位置、大小、鼠标定位操作】是Web开发中不可或缺的部分，JavaScript提供了丰富的属性用于操作DOM元素的位置、尺寸以及获取鼠标位置。了解并熟练掌握这些属性有助于提高开发效率和编写高质量的Web...
在JavaScript编程中，获取页面和屏幕尺寸大小是前端开发中常见的需求之一，这涉及到一系列的属性和方法，用于测量浏览器窗口、文档元素以及设备屏幕的大小。以下将详细解析如何利用JavaScript来获取这些参数，包括...
此时可以通过读取`<img>`元素的属性来获取图像的尺寸和文件大小等信息。 ```javascript function orsc() { if (img.readyState != "complete") return false; alert("尺寸：" + img.offsetWidth + "X" + img....
本文将详细解释如何使用JavaScript来获取鼠标的页面位置和相对元素的位置。 首先，我们要知道在JavaScript中，`event`对象是事件触发时传递给事件处理函数的参数，它包含了与事件相关的各种信息，如鼠标的位置。...
本文将详细介绍如何使用JavaScript来获取浏览器显示区域的相关尺寸信息。 #### 一、关键概念解析 在开始之前，我们先来了解几个关键的概念： - **Client Size**：表示可视区域的宽度和高度。 - **Offset Size**：...
总结来说，获取React组件的位置和大小属性通常需要结合JavaScript原生API和React生命周期或Hooks。使用`getBoundingClientRect()`可以获取静态尺寸，而`ResizeObserver`则更适合实时监测尺寸变化。在实际项目中，应...
综上所述，jQuery提供了一系列用于获取和设置元素尺寸与坐标的便捷方法。开发者可以根据自己的需求选择合适的方法来实现特定的页面布局或交互效果。这些方法不仅简化了代码，也提高了开发效率。需要注意的是，为了...