您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript学习笔记-DOM元素尺寸和位置

发布时间：2018-04-05 18:07:56编辑：雪饮阅读（）

 获取元素的实际尺寸

包含填充之后的实际可视大小，不包含边框大小，不包含外边界。

如果有滚动条，则不包含滚动条的大小。

无论你原来设置的样式单位是em或者pt等，最终获取的结果的单位是px

var box=document.getElementById("box");

   alert(box.clientWidth);

   alert(box.clientHeight);

获取滚动尺寸

获取滚动高度，可滚动高度，就是将滚动框拉直，不再滚动的高度，这个很好理解。scrollHeight通常用在iframe自适应内容高度的情况。

三大浏览器都会忽略边框尺寸和边界、包含填充，如果有滚动条，则会实际尺寸减去滚动条尺寸。如果有实际溢出，并且有滚动条，则获取的尺寸包含滚动条尺寸。

var box=document.getElementById("box");

   alert(box.scrollHeight);

获取元素实际大小

滚动条不包含、边框包含，填充不包含，边界不包含，如果有溢出正好有滚动条则只获取设置的尺寸，而不计算溢出的部分。

var box=document.getElementById("box");

   alert(box.offsetWidth);

   alert(box.offsetHeight);

获取元素左边框和上边框的大小

var box=document.getElementById("box");

   alert(box.clientTop);

   alert(box.clientLeft);

获取当前元素相对于父元素的位置

var box=document.getElementById("box");

   alert(box.offsetTop);

   alert(box.offsetLeft);

获取父元素

有一个小bug，如

有两个div一个id是pox，一个id是box，外层的是pox，内层的是box，如果此时外层没有使用定位，那么内层box获取的父元素就是body而不是pox，只有使用了定位才可以获取位pox

var box=document.getElementById("box");

   alert(box.offsetParent);

通过递归获取某个元素距离最外层的位置

function offsetTop(element){

   var top=element.offsetTop;

   var parent=element.offsetParent;

   while(parent != null){

      top+=parent.offsetTop;

      parent=parent.offsetParent;

   }

   return top;

}

获取溢出后滚动条滚动高度

获取滑块所处位置，比如滑块在初始位置则为0，滑块向下滑动则该值就越大。

即滚动时候滚动过的隐藏的地方的高度

var box=document.getElementById("box");

   alert(box.scrollTop);