小解：offsetWidth与offsetLeft

1、offsetWidth: 为元素的width+元素的padding+边框的宽度

如图：

2、offsetLeft、offsetTop、offsetRight、offsetBottom

以offsetLeft为例进行说明，在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：（测试所用的浏览器版本为：Chrome 68.0.3440.106， opera54.0， Firefox61.0.1和IE11.0）

2.1在父元素均不设置position属性时，在Chrome，opera和IE浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离且body.offsetLeft=0,

在firefox浏览器中offsetLeft是元素边框外侧到body内侧的距离body.offsetLeft=-边框宽度

如图：

2.2当父元素设置position元素时又分为两种情况，

2.2.1如果父元素时body且body设置了position属性，在Chrome和opera浏览器中offsetLeft是元素边框外侧到body边框外侧的距离，

在IE和fireForx浏览器中offsetLeft是元素边框外侧到body边框内侧的距离

2.2.2如果父元素不是body元素且设置了position属性时，offsetLeft为元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）。

如图

3、下面通过实例进行说明（Chrome浏览器）：

Html结构为

Css样式：将body，container，box, content的margin和padding都设置为10px，container长宽为300px，box长宽为100px，content长宽为50px，都设置宽度为5px的边框。具体查看下方源代码。效果如下图

3.1 offsetWidth

container.offsetWidth =container的width+padding+边框宽度=300+2×10+2×5=330

console.log(container.offsetWidth)输出结果为

3.2

3.2.1父元素均不设置position属性

document.body.offsetLeft=0

document.body.offsetLeft= container边框外侧到窗口内侧的距离=body.margin+body边框宽度+container.margin+container.padding+container的left=10+5+10+10=35px;

aBoxes[0].offsetLeft=第一个div.box边框外侧到窗口内侧的距离=body.margin+body边框宽度+container.margin+container.padding+container边框宽度+box.margin+box.padding=10+5+10+10+5+10+10px=60px;

console.log(document.body.offsetLeft)

console.log(aBoxes[0].offsetLeft)输出结果为

2.2.2将body的position设置为relative

document.body.offsetLeft=0

container.offsetLeft=container边框外侧到body边框外侧的距离= body边框宽度+container.margin+container.padding =5+10+10=25px;

aBoxes[0].offsetLeft=第一个div.box边框外侧到body边框外侧的距离= body边框宽度+container.margin+container.padding+container边框宽度+box.margin+box.padding=5+10+10+5+10+10px=50px;

console.log(document.body.offsetLeft);

console.log(container.offsetLeft);

console.log(aBoxes[0].offsetLeft);输出结果为

2.2.3将container的position设置为relative，并设置其left为100px，body不设置position属性。

oContainer.offsetLeft= 为container边框外侧到窗口内侧的距离=body.margin+body边框宽度+container的left+container.margin+container.padding+container的left=10+5+100+10+10=135;

aBoxes[0].offsetLeft=第一个div.box边框外侧到container边框内侧的距离= container.padding+box.margin=10+10px=20;

aBoxes[1].offsetLeft= 第二个div.box边框外侧到container边框内侧的距离= container.padding + box.margin +box.offsetWidth+2*box.margin=10+10+130+10+10=170;

console.log(oContainer.offsetLeft);

console.log(aBoxes[0].offsetLeft);

console.log(aBoxes[1].offsetLeft);输出结果为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}body{//position: relative;margin:10px;padding: 10px;border: 5px solid black;}#container{position: relative;left: 100px;margin: 10px;padding: 10px;border: 5px solid #ccc;background: red;width: 300px;height: 300px;//overflow: hidden;}.box{position: relative;float: left;margin: 10px;padding: 10px;border: 5px solid black;background: orange;width: 100px;height: 100px;}.content{margin: 10px;padding: 10px;border: 5px solid black;background: yellow;width: 50px;height: 50px;}</style>
</head>
<body><div id="container">            <div class="box"><div class="content"></div></div><div class="box"><div class="content"></div></div></div><script type="text/javascript">var oContainer=document.getElementById("container");var aBoxes=getElementsByClassName(oContainer,"box");console.log("container.offsetWidth="+oContainer.offsetWidth);console.log("box.offsetWidth="+aBoxes[0].offsetWidth);//console.log(aBoxes[1].firstElementChild.offsetWidth);//console.log(document.body.offsetLeft);console.log("container.offsetLeft="+oContainer.offsetLeft);console.log("box1.offsetLeft="+aBoxes[0].offsetLeft);console.log("box2.offsetLeft="+aBoxes[1].offsetLeft);console.log("content.offsetLeft="+aBoxes[1].firstElementChild.offsetLeft);// alert(document.body.offsetLeft);// alert(oContainer.offsetLeft);// alert(aBoxes[0].offsetLeft);// alert(aBoxes[1].offsetLeft);// alert(aBoxes[1].firstElementChild.offsetLeft);function getElementsByClassName(parent,className){var allChildren=parent.getElementsByTagName("*");var arr=[];for(var i=0;i<allChildren.length;i++){if (allChildren[i].className==className) {arr.push(allChildren[i]);               }}      return arr;         }</script></body>
</html>

小解：offsetWidth与offsetLeft相关推荐

JS——offsetWidth与offsetLeft用法之无缝滚动
知识讲解: (1)offsetWidth是什么? 答:它可以获取物体宽度的数值:offsetWidth实际获取的是盒模型(width+border + padding)的宽度. 如图: (2)offs ...
对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解
如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop 在刚开始使用的时候总是不能理解这四个有什么不一样,用在哪里,因为这几个词真的太像了,emmm,总 ...
offsetWidth与offsetLeft
1.offsetWidth: 为元素的width+元素的padding+边框的宽度如图: 2.offsetLeft.offsetTop.offsetRight.offsetBottom 以offse ...
[绍棠] scrollWidth,clientWidth,offsetWidth的区别
说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. ...
分享下offsetLeft和clientLeft和scrollLeft区别的总结
在做前端的时候很多时间都会用到offset,clientLeft,scrollLeft-类似这样的属性,他们到底有什么区别呢?他们分别是指哪里呢?我们一起来分析分析. 1.offsetWidth,of ...
js中的offsetLeft和style.left
(1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...
JS写的不咋地的碰撞检测
最近在学习碰撞检测相关的知识,但说实话,写的不咋地.但是因为鄙人学识浅薄,所以觉得基本上还行,但是挺追求我完美的,所以想拿出来让大神们批评批评. 先来看一下效果感觉哇,真卡,真难受.因为本来是正方形 ...
深入理解定位父级offsetParent及偏移大小
偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个 ...
基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...

小解：offsetWidth与offsetLeft

小解：offsetWidth与offsetLeft相关推荐

最新文章

热门文章