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

版权声明:欢迎转载,请在文首注明原文链接。 https://blog.csdn.net/Alcantara/article/details/79945993

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样式属性设置为relativeabsolute的祖父节点的相对偏移

scrollTop()scrollLeft()获取和设置元素的滚动条距顶端和距左侧的距离

event.pageXevent.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) 滚动条距页面顶端

标准模式(chromefirefox


怪异模式(chromefirefox


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屏幕相关

标准模式下(都兼容,IE11window.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不把滚动条考虑在内。

计算clientWidthscrollWidth时,滚动条占据的宽度会被抛掉,即使滚动条没有占content内容宽度。

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

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

4). offsetLeftstyle.left的区别

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

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

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

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


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页