dom操作------获取长/宽/距离等值的若干方法
1、offsetLeft:获取元素边框以外至文档顶的距离;若其祖先元素有定位属性position则返回值为元素到该定位元素的距离,不包括祖先元素的三宽(padding,border,margin),且该属性为只读。
2、offsetTop:同上;
3、scrollHeight:内容高 + padding (含超出盒子范围的高度,用于原生JS里面获取元素高宽值); 4、clientHeight:内容高 + padding (不含超出盒子范围的高度,用于原生JS里面获取元素高宽值); 5、offsetHeight: 内容高 + padding + border (不含超出盒子范围的高度,用于原生JS里面获取元素高宽值); 6、scrollTop:获取滚动条距顶或左端的距离; 7、document.documentElement.clientHeight:(其中documentElement表示文档根元素,即HTM元素)
获取当前浏览器窗口的高宽,不含滚动条(兼容所有浏览器)。 8、document.documentElement.offsetHeight:
返回文档的实际高度,包括其内顶底元素的外边距(兼容所有浏览器) 9、document.body.clientHeight:
获取整个文档的高宽,超出容器大小的忽略不计,包含文档顶底元素的内外边距值,若其内包含决对定位的元素,不包括在计算范围之内。若文档为空时,
高度返回0,宽度返回浏览器窗口宽(兼容所有浏览器)。 10、document.body.scrollHeight:
获取文档的实际高度,超出容器范围加入计算,包括文档顶底元素的内外边距,若其中有绝对定位的元素,亦包含在计算范围之内,当文档内容小于
窗口高度时,返回值为浏览器窗口高,反之为实际文档高。 11、document.body.offsetHeight:
获取文档的总高度,包含文档顶底元素的padding、border,不含margin,不包括绝对定位的元素高宽。 12、设置或返回网页卷起的高度,窗顶到文档顶的距离。
document.body.scrollTop:(适合谷歌浏览器)
document.documentElement.scrollTop:(适合火狐和IE浏览器)
window.scrollY和window.scrollX:得到IOS中当前窗口的y轴和x轴滚动条的值。
注意:当使用document.documentElement.scrollTop = document.body.scrollTop =100;设置滚动条的高度时,需人为触发事件调动该方法,若想达到页面加载完成即滚动到指定位置,
需要使用jquery方法 $("html,body").animate({"scrollTop": "300px"}, 10); 13、window.screen.height:返回电脑屏幕的高宽。 14、window.innerHeight
返回浏览器窗口高宽,包含滚动条宽度值在内,不含工具栏。适用所有浏览器不包括小于9版本的IE浏览器。
通吃的写法为:var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;宽度同理。
dom操作------获取长/宽/距离等值的若干方法的更多相关文章
- vue怎么不通过dom操作获取dom节点
今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"&g ...
- dom操作------获取元素的若干方法
// 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...
- 【学亮IT手记】jQuery DOM操作-获取内容和属性
jQuery拥有可操作HTML元素和属性的强大方法. 其中非常重要的部分就是操作DOM的能力. DOM--文档对象模型. <!DOCTYPE html> <html> < ...
- JavaScript的DOM操作获取元素的大小
通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...
- JavaScript的DOM操作获取元素实际大小
clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...
- JavaScript的DOM操作获取元素周边大小
一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...
- js dom操作获取节点的一些方法
在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...
- javascript的DOM操作获取元素
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- android获取view宽高的几种方法
在onCreate方法中我们通过mView.getWidth()和mView.getHeight()获取到的view的宽高都是0,那么下面几种方法就可以在onCreate方法中获取到view的宽高. ...
随机推荐
- 安装bazel(syntaxnet依赖工具)
1.简介 Bazel是一个类似于Make的工具,是Google为其内部软件开发的特点量身定制的工具,如今Google使用它来构建内部大多数的软件.它的功能有诸多亮点: 多语言支持:目前Bazel默 ...
- 别人的Linux私房菜(4)安装CentOS7
linux磁盘分区参考: 添加磁盘分区(总30G). BIOS boot 2MB 系统自定义文件系统 分区格式为主要分区 /boot 1GB 文件系统为xfs 主要分区 / 10GB 文件系统为x ...
- 《Linux就该这么学》第五天课程
今天我很迷茫! 一下是一些命令的整合 原创地址:https://www.linuxprobe.com/chapter-04.html 下面是Linux系统中最重要的10个环境变量 变量名称 作用 HO ...
- LOJ-10103(求删去割点后最多的连通分量)
题目链接:传送门 思路: (1)这道题的图可能不连通,所以需要多次Tarjan: (2)设置cut[i]=x数组表示第i个节点被删除后右多少个子图(这个只是在一个图中),如果是根节点就要-1,因为根节 ...
- 前端vue框架 脚手架
1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...
- 循环结构-for,while,do-while
for,while,do-while >完整的循环应该包含以下四个部分: 初始化语句:初始化工作,在循环体开始之前执行 条件表达式:一个boolean表达式,决定是否执行循环体 循环体:反复执行 ...
- SQL Server PageIOLatch和PageLatch
Latch是轻量级的锁,它是SQL Server内部用来同步资源访问的一个数据结构,使数据的访问同步有序,这意味着,当一个线程获得资源R的Latch的独占使用权时,如果其他的线程也想访问这个Latch ...
- appium定位之xpath定位
前面也说过appium也是以webdriver为基的,对于元素的定位也基本一致,只是增加一些更适合移动平台的独特方式,下面将着重介绍xpath方法,这应该是UI层元素定位最强大的方法啦! 以淘宝app ...
- 判断字符串是否为正整数 & 浮点小数
/** * 判断字符串是否为数字(正整数和浮点数) * @param str * @return */public static boolean isNumeric(String str) { Str ...
- centos6.2升级到centos6.8(6.5应该也一样)
1.根据这篇文章https://wenku.baidu.com/view/55bf7f8db8f67c1cfad6b8bf.html修改CentOS-Base.repo文件(主要是修改baseurl为 ...