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操作------获取长/宽/距离等值的若干方法的更多相关文章

  1. vue怎么不通过dom操作获取dom节点

    今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"&g ...

  2. dom操作------获取元素的若干方法

    // 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...

  3. 【学亮IT手记】jQuery DOM操作-获取内容和属性

    jQuery拥有可操作HTML元素和属性的强大方法. 其中非常重要的部分就是操作DOM的能力. DOM--文档对象模型. <!DOCTYPE html> <html> < ...

  4. JavaScript的DOM操作获取元素的大小

    通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...

  5. JavaScript的DOM操作获取元素实际大小

    clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...

  6. JavaScript的DOM操作获取元素周边大小

    一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...

  7. js dom操作获取节点的一些方法

    在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...

  8. javascript的DOM操作获取元素

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

  9. android获取view宽高的几种方法

    在onCreate方法中我们通过mView.getWidth()和mView.getHeight()获取到的view的宽高都是0,那么下面几种方法就可以在onCreate方法中获取到view的宽高. ...

随机推荐

  1. centos6.9 编译安装 zabbix-3.0.15

    本文采用编译安装,请在zabbix官网下载所需版本.此处安装版本是:zabbix-3.0.15.tar.gz 操作系统:centos 6.9 一.安装mysqlmysql-community-libs ...

  2. 用python语言算π值并且带有进度条

    用python算圆周率π 1.准备第三方库pip 打开cmd 输入代码:pip install requests ,随后就会成功 因为小编已经安装好了,所以就不把图截出来了 2.利用马青公式求π    ...

  3. lua的table转为excel表格的方法

    项目中需要用到转表工具,由于没有直接的转表工具,而且嵌套的table(table里面嵌套了多层表格与数组).无奈之下,只好采用折衷的方法,先将table表格转为json数据,再用在线转表工具将json ...

  4. 【MarkMark学习笔记学习笔记】javascript/js 学习笔记

    1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...

  5. 1018 Public Bike Management (30) Dijkstra算法 + DFS

    题目及题解 https://blog.csdn.net/CV_Jason/article/details/81385228 迪杰斯特拉重新认识 两个核心的存储结构: int dis[n]: //记录每 ...

  6. Note of Python Turtle

    Note of Python Turtle         Turtle 库函数是 Python语言中一个流行的绘图函数库.Turtle 意思是海龟,在Python中显示为一个小箭头,通过它的移动而留 ...

  7. vs2008快捷键一览表

    Ctrl+E,D ----             格式化全部代码 Ctrl+K,F ----             格式化选中的代码 CTRL + SHIFT + B          生成解决方 ...

  8. 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影)

    [源码下载] 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) 作者:webabcd 介 ...

  9. 简单的基于矩阵分解的推荐算法-PMF, NMF

    介绍: 推荐系统中最为主流与经典的技术之一是协同过滤技术(Collaborative Filtering),它是基于这样的假设:用户如果在过去对某些项目产生过兴趣,那么将来他很可能依然对其保持热忱.其 ...

  10. SSD报告 - QRadar远程命令执行

    SSD报告 - QRadar远程命令执行 漏洞摘要 QRadar中的多个漏洞允许远程未经身份验证的攻击者使产品执行任意命令.每个漏洞本身并不像链接那么强大 - 这允许用户从未经身份验证的访问更改为经过 ...