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

原创 2018年04月15日 00:28:06

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是只读的


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

javaScript获取元素位置以及元素页面大小总结

js获取元素位置以及元素页面大小总结: 一:元素位置: js中获取元素位置也就是元素的left以及top位置利用el.offset即可。el.offsetLeft以及el.offsetTop获取的...
  • u012545279
  • u012545279
  • 2013-12-09 13:58:13
  • 1056

[HTML][IE兼容性]IE中“浏览器模式”和“文档模式”的测试

之前我们曾有介绍过IE中“浏览器模式”和“文档模式”的区别,今天我们就来看一个简单的对比测试,看看在不同的“浏览器模式”或“文档模式”下,浏览器对代码的渲染会发生什么什么变化。 浏览器模式下的影...
  • szwangdf
  • szwangdf
  • 2013-08-12 17:32:59
  • 13613

自己常见的一些JavaScript兼容总结

1、document.formName.item(“itemName”) 问题 说明:IE下,可以使用document.formName.item(“itemName”)或document.form...
  • u011263845
  • u011263845
  • 2015-04-20 20:03:30
  • 7916

javascript中的页面元素定位

一.      学习目标了解关于页面对象定位的相关属性,能熟练的把任一对象定位到网页的任意位置。需掌握的属性列表为:n       offsetX、offsetYn       clientX、cli...
  • springInJava
  • springInJava
  • 2006-11-28 15:23:00
  • 3945

HTML元素尺寸图解

在HTML中几乎每一个元素都有如下的尺寸模型
  • dreamwbt
  • dreamwbt
  • 2016-11-25 16:04:14
  • 184

css 定位模型和浮动总结

对于css定位,今天总算是搞明白了,做一下小结。 css 中有3种基本的定位机制:普通流、浮动和绝对定位。说明:普通流中元素框的位置由元素在HTML中的位置决定,块级框从上到下一个接一个地垂直排列,框...
  • kaiyanghll
  • kaiyanghll
  • 2016-06-03 21:31:12
  • 339

style.pixelLeft;style.posLeft等的一些定位元素

style.pixelLeft: 返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值. style.posL...
  • Dark_Blue_Sea
  • Dark_Blue_Sea
  • 2007-05-08 15:43:00
  • 2760

常用的8种定位元素的方式

find_element_by_ 1.id   2.name  3.class_name  4.tag_name 5.link_text    6.partail_link_text 7.xpath...
  • weixin_38079422
  • weixin_38079422
  • 2017-12-04 15:22:24
  • 184

第一章 学习JavaScript必须知道的事儿

第一章 学习JavaScript必须知道的事儿 知识点:调用js代码、js标签特性、js引入方式、js引入位置、js调试 1.1.标签用于定义客户端脚本语言。1.2标签定义 有五个属性: (1...
  • zengyonglan
  • zengyonglan
  • 2016-12-06 15:12:55
  • 275

IE11版本找不到控件元素的问题解决方法

IE版本切换到IE11以后,发现查找空间报错,提示找不到控件元素 查找资料发现,IE11上增加了“保护模式”功能,该功能启动的情况下,selenium就无法抓取空间或获取页面信息。需要手工设...
  • Ls4034
  • Ls4034
  • 2017-08-24 22:51:54
  • 178
收藏助手
不良信息举报
您举报文章:[JavaScript]元素尺寸定位总结[含兼容性、文档模式测试]
举报原因:
原因补充:

(最多只允许输入30个字)