[JavaScript]元素尺寸定位总结[含兼容性、文档模式测试]

1. 基本概念

相对于定位了的父容器 注意不含滚动条宽度	相当于content+padding 注意不含滚动条宽度	注意不含border	相对定义了relative的父容器
offsetWidth	clientWidth	scrollWidth	style.width
offsetHeight	clientHeight	scrollHeight	style.height
相对于定位了的父容器	相当于border
offsetLeft	clientLeft	scrollLeft	style.left
offsetTop	clientTop	scrollTop	style.top
Jquery定位方法
.height()  .width()  .outerHeight()  .outerWidth()
.offset()相对文档的偏移
.position()相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移
scrollTop()和scrollLeft()获取和设置元素的滚动条距顶端和距左侧的距离
event.pageX和event.pageY，相对于文档

2. 快速获得元素相对文档位置

getBoundingClientRect()方法

3. 浏览器视口的大小和滚动大小

var w=window.innerWidth  // 含滚动条

|| document.documentElement.clientWidth   // 标准模式下：视口宽度（不含滚动条）

|| document.body.clientWidth;   // 怪异模式下：视口宽度（不含滚动条）

document.body.scrollLeft|| document.documentElement.scrollLeft;

document.body.scrollTop|| document.documentElement.scrollTop;

（1）window.innerWidth

 

标准模式下：（IE 6 7 8不支持innerWidth/Height）

怪异模式下：（IE 6 7 8不支持innerWidth/Height, chrome不支持outerWidth/Height）

（2）client,  scroll,  offset

标准模式下（document.documentElement是视口尺寸，document.body是body元素尺寸）

怪异模式下（document.body是视口尺寸，document.documentElement是html元素尺寸）

 

(3) 滚动条距页面顶端

标准模式（chrome和firefox）

怪异模式（chrome和firefox）

IE : 标准模式和怪异模式都不能获取

a. 目前试验来看，重新加载页面后浏览器的滚动条不变，DIV框的滚动条都回到顶部！

b. 2018-4-14测试：

标准模式下chrome还是通过document.documentElement.scrollTop获取，而非document.body.scrollTop

IE无论哪种方法都是0

c. 使用document.documentElement.scrollLeft设置值，必须在人为事件触发下才生效； 
想要页面加载完毕时自动滚动一定距离，则使用jquery的animate，如下面例子： 
$("html,body").animate({"scrollLeft":"300px"}, 1000); 
$("html,body").animate({"scrollTop":"300px"}, 1000);

(4) screen屏幕相关

标准模式下（都兼容，IE11的window.screenTop要计算菜单栏、工具栏）

怪异模式下（chrome ff没有window.screenLeft/Top,IE有）

  

4  HTML DOM event对象

clientX	2 级 DOM没有提供把窗口坐标转换为文档坐标的标准方法。 在 IE以外的浏览器，使用 window.pageXOffset和 window.pageYOffset即可。
offsetX	发生事件的地点在事件源元素的坐标系统中的 x坐标和 y坐标。	它是IE属性
pageX	相对文档	它是IE属性
screenX	screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。

仅供参考

 5. 其它要点：

1). padding与滚动条的关系：滚动条占padding的空间，当padding没有设置或者已经设置但是宽度小于滚动条，那么多余的宽度就会占content内容宽度。 

子元素的margin不把滚动条考虑在内。

计算clientWidth和scrollWidth时，滚动条占据的宽度会被抛掉，即使滚动条没有占content内容宽度。

2). offset是相对于父容器（必须定义了relative），不是父元素。

3). scroll：如果子元素没有设置absolute，父元素的srollHeight包括父元素下外padding+子元素的下margin，如果有absolute，则只包括子元素的下margin。

4). offsetLeft与style.left的区别

最大区别在于offsetLeft以子元素border左上角为基准，style.left以子元素margin左上角为基准

style只能获取内联属性（设置的话就不存在）

style.left返回的是字符串,offsetLeft返回的是数值

. style.left是读写的，offsetLeft是只读的