javascript offsetLeft,Left,clientLeft 各种浏览器位置相关属性

分手后的思念是犯贱 2021-11-13 14:52 417阅读 0赞

![在这里插入图片描述][20190731234003171.gif]

javaScript窗口属性：  
网页可见区域宽：document.body.clientWidth  
网页可见区域高：document.body.clientHeight  
网页可见区域宽：document.body.offsetWidth (包括边线的宽)  
网页可见区域高：document.body.offsetHeight (包括边线的宽)  
网页正文全文宽：document.body.scrollWidth  
网页正文全文高：document.body.scrollHeight  
网页被卷去的高：document.body.scrollTop  
网页被卷去的左：document.body.scrollLeft  
网页正文部分上：window.screenTop  
网页正文部分左：window.screenLeft  
屏幕分辨率的高：window.screen.height  
屏幕分辨率的宽：window.screen.width  
屏幕可用工作区高度：window.screen.availHeight  
屏幕可用工作区宽度：window.screen.availWidth

在IE、FireFox、Opera下都可以使用  
document.body.clientWidth  
document.body.clientHeight  
即可获得，很简单，很方便。  
而在公司项目当中：  
Opera仍然使用  
document.body.clientWidth  
document.body.clientHeight  
可是IE和FireFox则使用  
document.documentElement.clientWidth  
document.documentElement.clientHeight  
原来是W3C的标准在作怪啊  
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话

在IE中：  
document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度  
注：在IE中“可见区域”基本不认可body，而必需使用documentElement！！！！

在FireFox中：  
document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度

在Opera中：  
document.body.clientWidth ==> 可见区域宽度  
document.body.clientHeight ==> 可见区域高度  
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）  
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

获取窗口高宽：  
var w= document.documentElement.offsetWidth;  
var h=document.documentElement.offsetHeight;

#### 将上图进行拆分 ####

#### 1、offsetWidth(offsetHeight): 为元素的width+元素的padding+边框的宽度  ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

#### 2、offsetLeft、offsetTop、offsetRight、offsetBottom  ####

以offsetLeft为例进行说明，在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]  
在firefox浏览器中offsetLeft是元素边框外侧到body内侧的距离body.offsetLeft=-边框宽度

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：

一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

二、offsetTop 只读，而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

#### clientHeight  ####

大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

#### offsetHeight  ####

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。  
           NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

#### scrollHeight  ####

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。  
           NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说  
clientHeight 就是透过浏览器看内容的这个区域高度。  
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。  
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

#### 1.clientHeight, clientWidth:  ####

这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入 元素中的页边距,边框等.

#### 2.clientLeft,clientTop:  ####

这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

#### 3.scrollLeft,scrollTop:  ####

如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.  
对于不可以滚动的元素,这些值总是0.

#### 4.scrollHeight,scrollWidth:  ####

不管有多少对象在页面上可见,他们得到的是整体.

#### 5.style.left:  ####

定位元素与包含它的矩形左边界的偏移量

#### 6.style.pixelLeft:  ####

返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.

IE6.0、FF1.06+：  
clientWidth = width + padding  
clientHeight = height + padding  
offsetWidth = width + padding + border  
offsetHeight = height + padding + border  
IE5.0/5.5：  
clientWidth = width - border  
clientHeight = height - border  
offsetWidth = width  
offsetHeight = height  
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width  
clientwidth：是元素的可见宽度。等于padding+width  
scrollwidth:是元素的宽度且包括滚动部分。  
offsetLeft:Html元素相对于自己的offsetParent元素的位置  
scrollLeft:返回和设置当前横向滚动务的坐标值

[20190731234003171.gif]: /images/20211113/a548866f3e254adb8a6b918daf1fd9e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20211113/54d94a6304bb47c99985d5ef870d3e25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: /images/20211113/4f1ffa5ec7cb43aeb2c6d43bc04c2ab5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]: /images/20211113/49740e73945143bfbb1b3b17eb59680b.png