窗口及元素尺寸大小位置获取方法记录

浏览器窗口滚动条位置：

　　1，IE8以及更早的浏览器：window.pageXOffset，windowYOffset；

　　2，所有现代浏览器：document.documentElement.scrollTop，document.decoumentElement.scrollLeft；　　----->正常模式下

　　　　　　　　　　　 document.body.scrollTop，document.body.scrollLeft；　　　　　　　　　　　　　　 ----->怪异模式下

浏览器视口尺寸：

　　1，IE8以及更早的浏览器：window.innerWidth，window.innerHeight；

　　2，现代浏览器：document.documentElement.clientWidth，document.documentElement.clientHeight；　　----->正常模式下

　　　　　　　　　 document.body.clientWidth，document.body.clientHeight；　　　　----->怪异模式下

元素尺寸：

　　1，el.getBoundingClientRect()；　　-----> 返回元素的时候width，height，x，y等属性值(非实时)。

　　2，el.getClientRects()；　　-----> 返回一组上面方法的对象，用户获取换行的内联元素每行矩形的属性(非实时)。

　　3，el.offsetWidth，el.offsetHeight；　　-----> 获取元素的宽高(包含边框，内边距，不包含滚动条。可用于内联元素)。

　　4，el.clientWidth，el.clientHeight；　　-----> 获取元素宽高（包含内边距，不包含边框和滚动条。用于内联元素的时候总是返回0）。

　　5，window.innerWidth，window.innerHeight；　　-----> IE8前

　　　　注：在文档根元素上，clientWidth与innerWidth结果一样。,

　　6，el.scrollWidth，el.scrollHeight；　　-----> 元素宽高，包含溢出部分（不包含边框和滚动条）

元素位置：

　　1，el.offsetLeft，el.offsetTop；　　-----> 获取元素距离文档左侧与顶部的距离（如果上级元素设置了定位的话，获取的就是祖先元素的距离）

获取指定坐标处最上层的元素：

　　1，document.elementFromPoint(x，y)；　　//指定坐标在视口外面的时候返回null。

设置滚动条位置：

　　1，window.scrollTo(x，y)；

　　2，window.scrollBy(x，y)；　　-----> 在滚动条原有基础上递增

　　3，el.scrollIntoView()；　　-----> 将指定元素显示视口顶部，类似锚点跳转。

　　4，el.scrollLeft，el.scrollTop；　　-----> 设置滚动条位置。

其他：

　　1，el.clientLeft　　----> 元素内边距外侧与边框外侧的距离，通常就是返回边框的宽度（如果其间有滚动条则会包含滚动条宽度）

　　　 el.clientRight　　----> 元素内边距外侧与边框外侧的距离，通常就是返回边框的高度（如果其间有滚动条则会包含滚动条宽度）

转载于:https://www.cnblogs.com/huangzhenghaoBKY/p/9979908.html

窗口及元素尺寸大小位置获取方法记录相关推荐

Web APIs-事件流、事件委托、其他事件、元素尺寸与位置
目录事件流事件捕获事件冒泡阻止冒泡解绑事件事件委托其他事件 1.页面加载事件 2. 页面滚动事件 3.页面尺寸事件元素尺寸与位置今日单词综合案例事件流事件完整执行过程中的流动路 ...
php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 div change width by drag div change width by drag 1.2 js代码 var eleLeft = $('#myDiv ...
窗口和元素的大小：offset client scroll
1.偏移量(offset)只读 offsetHeight:元素垂直方向上占用的空间大小.包括元素内容区高度.元素上下内边距.(可见的)水平滚动条高度.上下边框高度 offsetWidth:元素水平方向 ...
节点属性、offset*获取元素尺寸、offsetLeft获取元素定位
1.节点属性节点属性汇总 - nodeType nodeName nodeValue 元素节点 1 大写标签名 null 属性节点 2 属性名属性值文本节点 3 #text 文本内容注释节点 ...
android获取位图字节数,Android中获取图片尺寸大小两种方法
两种方法建议用第二种 private void getPictureSize(String path) { /*第一种直接把bitmap加载到内存中,通过对bitmap的测量, 得出宽高,由于这个 ...
opencv 调整窗口大小_opencv改变imshow窗口大小,窗口位置的方法
opencv改变imshow窗口大小,窗口位置的方法如下所示: cv2.HoughLinesP cv2.namedWindow("enhanced",0); cv2.resize ...
二、属性操作，文本属性值，元素操作，尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
这几个方法让你学会PDF尺寸大小怎么调整
每次我需要打印文档或档案的时候,都会将其转换为PDF文件再去打印,因为这样可以有效的避免出现排版和格式错乱的问题.不过有一次我将档案转换为PDF格式时,查看打印预览的时候却发现页面有点太大了,这样打印 ...
【C++ 科学计算】获取矩阵每个元素绝对值大小值
目录获取矩阵每个元素绝对值大小值获取矩阵每个元素绝对值大小值获取每个元素的大小 abs(A) Y = abs(X) X 和 Y 必须具有相同的矩阵类型或立方体类型. mat A(2,2);A(0 ...
Python PIL.Image模块：图片变更尺寸大小(宽x高)
现实需求:变更图片尺寸要求:原图为建行一广告图片(来源于网络),缩小为800x600的小图片. >>> import os >>> from PIL import ...

窗口及元素尺寸大小位置获取方法记录

窗口及元素尺寸大小位置获取方法记录相关推荐

最新文章

热门文章