JavaScript的DOM元素尺寸和位置

时间  2021-01-02
标签 html 浏览器 ide 函数 spa htm 对象 递归 element get 栏目 JavaScript 繁體版
原文   原文链接

本章，咱们主要讨论一下页面中的某一个元素它的各类大小和各类位置的计算方式，以
便更好的理解。html


一．获取元素 CSS大小
1.经过style 内联获取元素的大小浏览器

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.getElementById('box'); //获取元素 
    2. 
   
   
            
   
   
  2. box.style.width; //200px、空 
    3. 
   
   
            
   
   
  3. box.style.height; //200px、空 
    4.

PS：style 获取只能获取到行内style 属性的CSS 样式中的宽和高，若是有获取；若是没
有则返回空。ide

2.经过计算获取元素的大小函数

  
  
           
  
  
    
   
   
            
   
   
  1. var style = window.getComputedStyle ? 
    2. 
   
   
            
   
   
  2. window.getComputedStyle(box, null) : null || box.currentStyle; 
    3. 
   
   
            
   
   
  3. style.width; //1424px、200px、auto 
    4. 
   
   
            
   
   
  4. style.height; //18px、200px、auto 
    5.

PS：经过计算获取元素的大小，无关你是不是行内、内联或者连接，它通过计算后得
到的结果返回出来。若是自己设置大小，它会返回元素的大小，若是自己没有设置，非IE
浏览器会返回默认的大小，IE 浏览器返回auto。spa


3.经过CSSStyleSheet 对象中的c***ules(或rules)属性获取元素大小htm

  
  
           
  
  
    
   
   
            
   
   
  1. var sheet = document.styleSheets[0]; //获取link 或style 
    2. 
   
   
            
   
   
  2. var rule = (sheet.c***ules || sheet.rules)[0]; //获取第一条规则 
    3. 
   
   
            
   
   
  3. rule.style.width; //200px、空 
    4. 
   
   
            
   
   
  4. rule.style.height; //200px、空 
    5.

PS：c***ules(或rules)只能获取到内联和连接样式的宽和高，不能获取到行内和计算后
的样式。
总结：以上的三种CSS 获取元素大小的方法，只能获取元素的CSS 大小，却没法获取元
素自己实际的大小。好比加上了内边距、滚动条、边框之类的。对象


二．获取元素实际大小
1.clientWidth 和clientHeight
这组属性能够获取元素可视区的大小，能够获得元素内容及内边距所占据的空间大小。递归

  
  
           
  
  
    
   
   
            
   
   
  1. box.clientWidth; //200 
    2. 
   
   
            
   
   
  2. box.clientHeight; //200 
    3.

PS：返回了元素大小，但没有单位，默认单位是px，若是你强行设置了单位，好比100em
之类，它仍是会返回px 的大小。(CSS 获取的话，是照着你设置的样式获取)。
PS：对于元素的实际大小，clientWidth 和clientHeight 理解方式以下：
1.增长边框，无变化，为200；
2.增长外边距，无变化，为200；
3.增长滚动条，最终值等于本来大小减去滚动条的大小，为184；
4.增长内边距，最终值等于本来大小加上内边距的大小，为220；
PS：若是说没有设置任何CSS 的宽和高度，那么非IE 浏览器会算上滚动条和内边距的
计算后的大小，而IE 浏览器则返回0。element


2.scrollWidth 和scrollHeight
这组属性能够获取滚动内容的元素大小。get

  
  
           
  
  
    
   
   
            
   
   
  1. box.scrollWidth; //200 
    2. 
   
   
            
   
   
  2. box.scrollWidth; //200 
    3.

PS：返回了元素大小，默认单位是px。若是没有设置任何CSS 的宽和高度，它会获得
计算后的宽度和高度。
PS：对于元素的实际大小，scrollWidth 和scrollHeight 理解以下:
1.增长边框，不一样浏览器有不一样解释：
a) Firefox 和Opera 浏览器会增长边框的大小，220 x 220
b) IE、Chrome 和Safari 浏览器会忽略边框大小，200 x 200
c) IE 浏览器只显示它原本内容的高度，200 x 18
2.增长内边距，最终值会等于本来大小加上内边距大小，220 x 220，IE 为220 x 38
3.增长滚动条，最终值会等于本来大小减去滚动条大小，184 x 184，IE 为184 x 18
4.增长外边据，无变化。
5.增长内容溢出，Firefox、Chrome 和IE 获取实际内容高度，Opera 比前三个浏览
器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。


3.offsetWidth 和offsetHeight
这组属性能够返回元素实际大小，包含边框、内边距和滚动条。

  
  
           
  
  
    
   
   
            
   
   
  1. box.offsetWidth; //200 
    2. 
   
   
            
   
   
  2. box.offsetHeight; //200 
    3.

PS：返回了元素大小，默认单位是px。若是没有设置任何CSS 的宽和高度，他会获得
计算后的宽度和高度。
PS：对于元素的实际大小，offsetWidth 和offsetHeight 理解以下：
1.增长边框，最终值会等于本来大小加上边框大小，为220；
2.增长内边距，最终值会等于本来大小加上内边距大小，为220；
3.增长外边据，无变化；
4.增长滚动条，无变化，不会减少；
PS：对于元素大小的获取，通常是块级(block)元素而且以设置了CSS 大小的元素较为
方便。若是是内联元素(inline)或者没有设置大小的元素就尤其麻烦，因此，建议使用的时候
注意。


三．获取元素周边大小
1.clientLeft 和clientTop
这组属性能够获取元素设置了左边框和上边框的大小。

  
  
           
  
  
    
   
   
            
   
   
  1. box.clientLeft; //获取左边框的长度 
    2. 
   
   
            
   
   
  2. box.clientTop; //获取上边框的长度 
    3.

PS：目前只提供了Left 和Top 这组，并无提供Right 和Bottom。若是四条边宽度不
同的话，能够直接经过计算后的样式获取，或者采用以上三组获取元素大小的减法求得。


2.offsetLeft 和offsetTop
这组属性能够获取当前元素相对于父元素的位置。

  
  
           
  
  
    
   
   
            
   
   
  1. box.offsetLeft; //50 
    2. 
   
   
            
   
   
  2. box.offsetTop; //50 
    3.

PS：获取元素当前相对于父元素的位置，最好将它设置为定位position:absolute；不然
不一样的浏览器会有不一样的解释。
PS：加上边框和内边距不会影响它的位置，但加上外边据会累加。

  
  
           
  
  
    
   
   
            
   
   
  1. box.offsetParent; //获得父元素 
    2.

PS：offsetParent 中，若是自己父元素是<body>，非IE 返回body 对象，IE 返回html 对
象。若是两个元素嵌套，若是上父元素没有使用定位position:absolute，那么offsetParent 将
返回body 对象或html 对象。因此，在获取offsetLeft 和offsetTop 时候，CSS 定位很重要。


若是说，在不少层次里，外层已经定位，咱们怎么获取里层的元素距离body 或html
元素之间的距离呢？也就是获取任意一个元素距离页面上的位置。那么咱们能够编写函数，
经过不停的向上回溯获取累加来实现。

  
  
           
  
  
    
   
   
            
   
   
  1. box.offsetTop + box.offsetParent.offsetTop; //只有两层的状况下 
    2.

若是多层的话，就必须使用循环或递归。

  
  
           
  
  
    
   
   
            
   
   
  1. function offsetLeft(element) { 
    2. 
   
   
            
   
   
  2. var left = element.offsetLeft; //获得第一层距离 
    3. 
   
   
            
   
   
  3. var parent = element.offsetParent; //获得第一个父元素 
    4. 
   
   
            
   
   
  4. while (parent !== null) { //若是还有上一层父元素 
    5. 
   
   
            
   
   
  5. left += parent.offsetLeft; //把本层的距离累加 
    6. 
   
   
            
   
   
  6. parent = parent.offsetParent; //获得本层的父元素 
    7. 
   
   
            
   
   
  7. } //而后继续循环 
    8. 
   
   
            
   
   
  8. return left; 
    9. 
   
   
            
   
   
  9. } 
    10.

3.scrollTop 和scrollLeft
这组属性能够获取滚动条被隐藏的区域大小，也可设置定位到该区域。

  
  
           
  
  
    
   
   
            
   
   
  1. box.scrollTop; //获取滚动内容上方的位置 
    2. 
   
   
            
   
   
  2. box.scrollLeft; //获取滚动内容左方的位置 
    3.

若是要让滚动条滚动到最初始的位置，那么能够写一个函数：

  
  
           
  
  
    
   
   
            
   
   
  1. function scrollStart(element) { 
    2. 
   
   
            
   
   
  2. if (element.scrollTop != 0) element.scrollTop = 0; 
    3. 
   
   
            
   
   
  3. } 
    4.
相关文章