HTML中常见的各种位置距离以及dom中的坐标讨论

最近在学习JavaScript，特意买了一本犀牛角书来看看，尼玛一千多页，看的我头昏脑涨，翻到DOM这章节，突然记起平常在使用DOM时，碰到了好多的这个dom里面的各种宽度，高度，特意在此写一写，写的不好或者写错了，欢迎各位指正。好了废话不多说，开始进入主题。

这篇文章主要讨论两点：

一、DOM中各种宽度、高度

二、DOM中的坐标系

下面我们看看DOM中都有一些什么宽度、高度。

常见的

offsetWidth	clientWidth	scrollWidth
offsetHeight	clientHeight	scrollHeight
offsetLeft	clientLeft	scrollLeft
offsetTop	clientTop	scrollTop

下面我们来一一讲解

offsetleft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。

offsettop:同理是指元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（不包括元素的边框和父容器的边框）。

offsetwidth:描述元素外尺寸宽度，是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个)，不包括外边距和滚动条部分。

offsetheight:同理描述元素外尺寸高度，是指元素内容高度+内边距高度(上下两个)+边框(上下两个)，不包括外边距和滚动条部分。

下面我们看一下一段代码

<div id="divParent" style="padding: 8px; background-color:#CCC; position: relative;"><div id="divChild" style="background-color:#C00; margin: 30px; padding: 10px;height: 200px; width: 200px; border: solid 10px  #0000CC;"></div></div>

<script type="text/javascript">var div = document.getElementById('divChild');var offsetHeight = div.offsetHeight;var offsetWidth = div.offsetWidth;div.innerHTML += 'offsetHeight: ' + offsetHeight + '<br />';div.innerHTML += 'offsetWidth: ' + offsetWidth + '<br />';var offsetLeft = div.offsetLeft;var offsetTop = div.offsetTop;div.innerHTML += 'offsetLeft: ' + offsetLeft + '<br />';div.innerHTML += 'offsetTop: ' + offsetTop + '<br />';var offsetParent = div.offsetParent;div.innerHTML += 'offsetParent: ' + offsetParent.id + '<br />';</script>

　　看一下效果

现在我们按照上面的说明比对一下

offsetleft:（div id=divChild）margin 30（外边距--距离父容器左边30px）+ (div id=divParent) padding 8 （父容器的内边左距离 8px）=38

offsettop:margin 30+ padding 8=38;

offsetwidth:本身的宽度（200）+内边距左右(10*2)+边框左右(10*2)=240;

offsetheight:同理；

下面我们来看下第二组

clientleft:元素的内边距的外边缘和边框的外边缘的距离，实际就是边框的左边框宽度

clienttop:同理边框的上边框的宽度

clientwidth:用于描述元素内尺寸宽度，是指元素内容+内边距大小，不包括边框、外边距、滚动条部分

clientheight:同理用于描述元素内尺寸高度，是指元素内容+内边距大小，不包括边框、外边距、滚动条部分

我们只更改一下JavaScript的代码，DOM不改变

chrome 41 版本

clientleft:左边框宽度 10；

clienttop：10；

clientwidth：本身宽度（200）+内边距(10*2)=220;

clientheight:本身高度(200)+内边距(10*2)=220;

正确，下面我们来看下嵌套的div盒子模型图

div id=divChild

div id=divParent

符合我们上面所说的，下面我们看下

scrollwidth：内容区域尺寸加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等

scrollheight：同上

scrolltop：滚动条上方卷去的高度

scrollleft：滚动条左边卷去的宽度

好现在我们看一段代码

 <div id="divParent"  style="padding: 8px; background-color: #aaa; height:200px; width:300px; overflow:auto" ><div id="divChild" style="background-color: #0f0;height: 400px; width: 500px; border: solid 10px #f00;"></div></div>

<script type="text/javascript">var divParent= document.getElementById("divParent");var scrollwidth = divParent.scrollWidth;var scrollheight = divParent.scrollHeight;var scrolltop = divParent.scrollTop;var scrollleft = divParent.scrollLeft;divChild.innerHTML += 'clientWidth: ' + scrollwidth + '<br />';divChild.innerHTML += 'clientHeight: ' + scrollheight + '<br />';
</script>

　　现在我们要计算id=divParent的scrollheight，和scrollwidth。根据上面的说明，我们知道应该按照下面的公式计算

scrollwidth=子div的宽度(500)+子div的边框(10*2)+父容器的padding（8）=528

scrollwidth=子div的高度(400)+子div的边框(10*2)+父容器的padding（8）=428

现在我们验证一下

我们发现在 ie8及之后的浏览器为428，firework 也为428；而 chrome Safari opera 都为436；

因此我们可以猜测 chrome和 Safari、opera 在计算 scrollheight时，加上了父容器的下 padding(8) 即 428+8=436；

下面我们在看看scrolltop和scrollleft的值怎么样

测试了好几个浏览器都发现其值为零，这是肿么回事，尼玛，万能的百度、谷歌，原来我的滚动条一直在顶端和左端，没有卷走高度，我们修改一下代码，将显示内容绑定到onscroll事件

<script type="text/javascript">var divParent = document.getElementById("divParent");divParent.onscroll = function () {divChild.innerHTML = "";var scrollwidth = divParent.scrollWidth;var scrollheight = divParent.scrollHeight;var scrolltop = divParent.scrollTop;var scrollleft = divParent.scrollLeft;divChild.innerHTML += 'clientWidth: ' + scrollwidth + '<br />';divChild.innerHTML += 'clientHeight: ' + scrollheight + '<br />';divChild.innerHTML += 'scrolltop: ' + scrolltop + '<br />';divChild.innerHTML += 'scrollleft: ' + scrollleft + '<br />';}
</script>

终于发现值改变了

另外我们在使用window的pageXOffset,pageYOffset求浏览器滚动条的卷去的高度和左边的距离，同时scrolltop、scrollleft也可以，但是要注意

当我们网页页面申明了dtd(文档模型时)，使用document.documentElement.scrolltop scrollleft获取浏览器卷去上面的距离,左边卷去的距离。

如果网页没有申明dtd（怪异模式时），使用document.body.scrolltop scrollleft获取上边卷去的距离、左边卷去的距离。

什么是dtd，这里简单解释一下，我们使用vs新建页面时，在每个网页的顶端一般会有这样的申明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这里申明了网页的模型，再浏览器加载网页时，会选择对应的模式渲染网页。

现在我们来测试一下

 <div id="divParent"   style="padding: 8px; background-color: #aaa; height:1200px; width:300px; overflow:auto" ><div id="divChild" style="background-color: #0f0;height: 400px; width: 500px; border: solid 10px #f00; position:absolute"></div></div>

<script type="text/javascript">var divParent = document.getElementsByTagName("body")[0];divParent.onscroll = function () {divChild.innerHTML = "";divChild.style.top = window.pageYOffset + "px";var scrollwidth = divParent.scrollWidth;var scrollheight = divParent.scrollHeight;var scrolltop = divParent.scrollTop;var scrollleft = divParent.scrollLeft;var pagexoffset = window.pageXOffset;var pageyoffset = window.pageYOffset;var documentelementtop = document.documentElement.scrollTop;var documentelementleft = document.documentElement.scrollLeft;var bodyscrolltop = document.body.scrollTop;var bodyscrollleft = document.body.scrollLeft;divChild.innerHTML += 'clientWidth: ' + scrollwidth + '<br />';divChild.innerHTML += 'clientHeight: ' + scrollheight + '<br />';divChild.innerHTML += 'scrolltop: ' + scrolltop + '<br />';divChild.innerHTML += 'scrollleft: ' + scrollleft + '<br />';divChild.innerHTML += 'pagexoffset: ' + pagexoffset + '<br />';divChild.innerHTML += 'pageyoffset: ' + pageyoffset + '<br />';divChild.innerHTML += 'documentelementtop: ' + documentelementtop + '<br />';divChild.innerHTML += 'documentelementleft: ' + documentelementleft + '<br />';divChild.innerHTML += 'bodyscrolltop: ' + bodyscrolltop + '<br />';divChild.innerHTML += 'bodyscrollleft: ' + bodyscrollleft + '<br />';}
</script>

　　chrome测试结果，我们发现 pagexoffset document.body.scrolltop 可以用，但是注意我当前的申明了 html5的<!DOCTYPE html>，说明document.documentelement可以用的。

在来看看 firefox的测试效果，同样申明了文档类型这里 document.documentelement可以用，尼玛真是日了狗了，难道是html5 文档类型特殊一点，我们测试一下其他类型的文档类型

但是发现结果和上面的一样，好吧，不管上面那些了，下面总结如何兼容scrolltop如果是求 scrolltop 可以取 body.scrolltop 和documen.documentelement.scrolltop的max值，这样不管如何总能取一个正确的值。

我们在上面的章节知道了如何取scrolltop值，接下来我们就来介绍一下dom中的窗口坐标和文档坐标，

窗口坐标：当前显示可见的页面的左上角的坐标(如果出现滚动条，且滚动条发生滚动，则窗口坐标和文档坐标不一致，因为窗口坐标只显示当前显示的页面的部分，而文档可能因为滚动条的缘故遮盖了)；

文档坐标：垂直滚动条在最上方，没有滚动，水平滚动条在最左边，没有滚动时，时的左上方的坐标

如果没有滚动条时，窗口坐标和文档坐标一致。

那如何在窗口坐标和文档坐标之间进行转换呢，这里我们就要用到上面的滚动条卷去的高度和坐标的距离，假设，有一个元素在文档中的y坐标（即垂直方向的）是200px；但是我们通过滚动条向下滚动了75px，那么当前的窗口坐标就为125px；

因此如果scrolltop的值大于0的话我们窗口的坐标y=文档的坐标y-scrolltop,

同时视口坐标也有对应的方法可以使用

可以通过调用元素的getBoundingClientRect方法。方法返回一个有left、right、top、bottom属性的对象，分别表示元素四个位置的相对于视口的坐标。getBoundingClientRect所返回的坐标包含元素的内边距和边框，不包含外边距。兼容性很好，非常好用。

下面贴一段犀牛角上的代码

得到滚动条值

function getScrollOffsets(w) {var w = w || window;           //除ie8及更早版本，其他浏览器都能使用if (w.pageXoffset != null) {return { x: w.pageXoffset, y: pageYoffset };}            //标注模式ie（或任何浏览器）var d = w.document;if (document.compatMode == "CSS1Compat")return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };                //怪异模式下（没有申明dtd）return { x: d.body.scrollLeft, y: d.body.scrollTop };}通过使用这个函数发现也不是很兼容 在chrome中一直是0,说明即使在标准模型中，，即申明了dtd chrome 也不能取documentElement.scrollLeft值。opera也同样不能取值，firefox能取值。因此早平常的使用中我还是 使用math.max(docuemnt.body.scrolltop,docuemnt.documentelement.scrolltop)来使用。好了今天的就介绍到这里。如有错误，欢迎各位博客园朋友指正

转载于:https://www.cnblogs.com/liuyuqing/p/4520470.html

HTML中常见的各种位置距离以及dom中的坐标讨论相关推荐

数据科学中常见的9种距离度量方法（包括曼哈顿距离、欧氏距离、半正矢距离等）
数据科学中常见的9种距离度量方法(包括曼哈顿距离.欧氏距离.半正矢距离等) 1.欧氏距离(Euclidean Distance) 2.余弦相似度(Cosine Similarity) 3.汉明距离(H ...
从字符串中首次出现的位置开始输出字符串中的字符
从键盘输入一个字符串和一个字符,然后从该字符在字符串中首次出现的位置开始输出字符串中的字符,如果未找到该字符,则输出"Not Found". int match(char *s,c ...
python中常见的漏洞_注意！Python中的10个常见安全漏洞及修复方法
原标题:注意!Python中的10个常见安全漏洞及修复方法源 /Python程序员编写安全的代码很困难,当你学习一门编程语言.一个模块或框架时,你会学习其使用方法.在考虑安全性时,你需要考虑如何避 ...
数据科学中常见的9种距离度量方法
选自towardsdatascience 作者:Maarten Grootendorst 机器之心编译编辑:陈萍在数据挖掘中,我们经常需要计算样本之间的相似度,通常的做法是计算样本之间的距离.在本 ...
数据科学中常见的9种距离度量方法，包括欧氏距离、切比雪夫距离、半正矢距离等
1.欧氏距离(Euclidean Distance) 欧式距离可解释为连接两个点的线段的长度.欧式距离公式非常简单,使用勾股定理从这些点的笛卡尔坐标计算距离. 代码实现: import numpy a ...
php中常见的错误类型有,JavaScript编程中会出现的错误类型有哪些？错误类型介绍...
JavaScript编程中会出现的错误类型有哪些?本篇文章就给大家介绍在JavaScript编程中出现的几种常见的错误类型.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助.[相关视频教 ...
python中求两点之间的距离_python – 列表中两点之间的距离公式
我需要创建一个列表,找到最接近的两个点,然后打印出来.如何比较列表中的每个点? 没有任何需要绘制或任何东西,只是比较点,找到列表中最接近的两个. import math # 'math' needed ...
MySQL数据库中常见的日志文件汇总！
一个优秀的Java后端开发工程师一定要掌握MySQL数据库,而日志文件记录了影响MySQL数据库的各种类型活动,因此也成为其必须要掌握的知识.今天千锋ava培训小编就给大家介绍MySQL数据库中常见的 ...
OpenCV检测子像素中的角点位置
OpenCV检测子像素中的角点位置检测子像素中的角点位置目标代码结果检测子像素中的角点位置目标在本教程中,您将学习如何: 使用OpenCV函数cv :: cornerSubPix查找更精 ...

HTML中常见的各种位置距离以及dom中的坐标讨论

HTML中常见的各种位置距离以及dom中的坐标讨论相关推荐

最新文章

热门文章