当前位置：首页 > 资讯 > 技术文档

JavaScript DOM元素尺寸和位置

时间：2020-08-05 02:30 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript DOM元素尺寸和位置

[b]一获取元素的CSS大小[/b] 1.通过style内联获取元素的大小

     var box = document.getElementById('box');    // 获得元素;

     box.style.width;                             // 200px;

     box.style.height;                            // 200px;

// PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空; [b]2.通过计算获取元素的大小[/b]

[u]复制代码[/u] 代码如下:

     var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;

     style.width;                                // 200px;

// PS:通过计算获取元素的大小,无关是行内/内联或链接,它返回经过计算后的结果; // 如果本身设置大小,它会返回元素的大小;如果本身没有设置,非IE会返回默认的大小,IE会返回auto; [b]3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小; [/b]

[u]复制代码[/u] 代码如下:

     var sheet = document.styleSheets[0];            // 获取link或style;

     var rule = (sheet.cssRules || sheet.rules)[0];  // 获取第一条规则;

     rule.style.width;                               // 200px;

PS:cssRules只能获取到内联和链接样式的宽和高,不能获取到行内和计算后的样式; 总结:以上三种CSS获取元素大小的方法,只能获取元素的CSS大小,却无法获取元素本身实际的大小;比如加上内边距/滚动条/边框之类的; [b]二获取元素实际大小 [/b] [b]1.clientWidth和clientHeight[/b] 这组属性可以获取元素可视区的大小,包含元素内容及内边距所占据的空间大小; box.clientWidth; // 200; PS:返回了元素大小,但没有单位,默认单位是px; PS:对于元素的实际大小,clientWidth和clientHeight理解如下: 1.元素增加边框,无变化,200; 2.元素增加外边框,无变化,200; 3.增加滚动条,最终值=原本大小-滚动条大小;184; 4.增加内边距,最终值=原本大小+内边距大小;220; PS:如果没有设置任何CSS的width和height,那么非IE会算上滚动条和内边距的计算后的大小;而IE则返回0; [b]2.scrollWidth和scrollHeight[/b] 这组属性可以获取没有滚动条的情况下,元素内容的总高度; box.scrollWidth; // PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度; [b]3.offsetWidth和offsetHeight[/b] 这组属性可以返回元素实际大小,包含边框/内边距和滚动条; box.offsetWidth; 200 PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度; PS:对于元素的实际大小,理解如下: 1.增加边框,最终值=原本大小+边框大小;220; 2.增加内边距,最终值=原本大小+内边距大小;220; 3.增加外边据,无变化; 4.增加滚动条,无变化,不会减小; PS:对于元素大小的获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便; [b]三获取元素周边大小[/b] [b] 1.clientLeft和clientTop [/b] // 这组属性可以获取元素设置了左边框和上边框的大小; box.clientLeft; // 获取左边框的宽度; [b]2.offsetLeft和offsetTop(偏移量)[/b]

// 这组属性可以获取当前元素边框相对于父元素边框的位置;
  box.offsetLeft;                  // 50;
  // PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
  // PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;

  box.offsetParent;                 // 得到父元素;
  // PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
  // 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;

// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
  box.offsetTop+box.offsetParent.offsetTop;     // 只有两层的情况下;
  // 如果多层的话,就必须使用循环或递归;
  function offsetLeft(element){
    var left = element.offsetLeft;        // 得到第一层距离;
    var parent = element.offsetParent;      // 得到第一个父元素;
    while(parent !== null){            // 判断如果还有上一层父元素;
      left += parent.offsetLeft;        // 将得到的距离累加;
      parent = parent.offsetParent;       // 将父元素也回溯;
    }                       // 然后循环;
    return left;                 // 得到最终距离;
  }

[b]3.scrollTop和scrollLeft[/b]

// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
  box.scrollTop;                  // 获取滚动内容上方的位置;

// 设置滚动条滚动到最初始的位置;
  function scrollStart(element){
    if(element.scrollTop != 0){
      element.scrollTop = 0;
    }
  }

[b]四 getBoundingClientRect()方法 [/b]

// 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom;
// 分别表示元素各边与页面上边和左边的距离;
  var box = document.getElementById('box');
  alert(box.getBoundingClientRect().top);    // 元素上边距离页面上边的距离;
  alert(box.getBoundingClientRect().right);   // 元素右边距离页面左边的距离;
  alert(box.getBoundingClientRect().bottom);   // 元素下边距离页面上边的距离;
  alert(box.getBoundingClientRect().left);    // 元素左边距离页面左边的距离;
  // PS:IE/Firefox/Opera/Chrome/Safari都支持;
  // 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
  document.documentElement.clientTop;      // 非IE为0,IE为2;
  document.documentElement.clientLeft;      // 非IE为0,IE为2;
// 兼容getBoundingClientRect()
  function getRect(element){
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;
    return {
      top:rect.top-top,           // 元素上边距-页面的上边距(0-0或2-2);
      bottom:rect.bottom-top,
      left:rect.left-left,         // 元素左边距-页面的左边距(0-0或2-2);
      right:rect.right-left
    }
  };

[b]五小结[/b] 1.偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间; 元素的可见大小由其高度和宽度决定,包括内边距/滚动条和边框; 2.客户区大小(client dimension):指的是元素内容及其内边距所占据的空间大小; 3.滚动大小(scroll dimension):包含滚动内容的元素的大小;

全部评论(0)

上一篇：javascript for-in有序遍历json数据并探讨各个浏览器差异
下一篇：js函数名与form表单元素同名冲突的问题

资讯排行榜
更多>>