JavaScript DOM元素尺寸和位置


Posted in Javascript onApril 13, 2015

一 获取元素的CSS大小

 1.通过style内联获取元素的大小

 

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

     box.style.width;                             // 200px;

     box.style.height;                            // 200px;

// PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空;

2.通过计算获取元素的大小

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

     style.width;                                // 200px;

 // PS:通过计算获取元素的大小,无关是行内/内联或链接,它返回经过计算后的结果;
 // 如果本身设置大小,它会返回元素的大小;如果本身没有设置,非IE会返回默认的大小,IE会返回auto;

3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小;

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

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

     rule.style.width;                               // 200px;

PS:cssRules只能获取到内联和链接样式的宽和高,不能获取到行内和计算后的样式;

总结:以上三种CSS获取元素大小的方法,只能获取元素的CSS大小,却无法获取元素本身实际的大小;比如加上内边距/滚动条/边框之类的;

二 获取元素实际大小

1.clientWidth和clientHeight

 这组属性可以获取元素可视区的大小,包含元素内容及内边距所占据的空间大小;
    box.clientWidth;                                // 200;
     PS:返回了元素大小,但没有单位,默认单位是px;
     PS:对于元素的实际大小,clientWidth和clientHeight理解如下:
     1.元素增加边框,无变化,200;
     2.元素增加外边框,无变化,200;
     3.增加滚动条,最终值=原本大小-滚动条大小;184;
     4.增加内边距,最终值=原本大小+内边距大小;220;
 PS:如果没有设置任何CSS的width和height,那么非IE会算上滚动条和内边距的计算后的大小;而IE则返回0;

2.scrollWidth和scrollHeight

 这组属性可以获取没有滚动条的情况下,元素内容的总高度;
    box.scrollWidth;
    // PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;

3.offsetWidth和offsetHeight

 这组属性可以返回元素实际大小,包含边框/内边距和滚动条;
    box.offsetWidth;                                 200
     PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
     PS:对于元素的实际大小,理解如下:
     1.增加边框,最终值=原本大小+边框大小;220;
     2.增加内边距,最终值=原本大小+内边距大小;220;
     3.增加外边据,无变化;
     4.增加滚动条,无变化,不会减小;

 PS:对于元素大小的获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便;

三 获取元素周边大小

 1.clientLeft和clientTop
 // 这组属性可以获取元素设置了左边框和上边框的大小;
     box.clientLeft;                                     // 获取左边框的宽度;

2.offsetLeft和offsetTop(偏移量)

// 这组属性可以获取当前元素边框相对于父元素边框的位置;
  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;                 // 得到最终距离;
  }

3.scrollTop和scrollLeft

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

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

四 getBoundingClientRect()方法

// 这个方法返回一个矩形对象,包含四个属性: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
    }
  };

五 小结

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

Javascript 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
vue.js实现左边导航切换右边内容
Oct 21 Javascript
JavaScript DOM操作表格及样式
Apr 13 #Javascript
JavaScript DOM进阶方法
Apr 13 #Javascript
JavaScript DOM基础
Apr 13 #Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 #Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 #Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 #Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 #Javascript
You might like
PHP 数组实例说明
2008/08/18 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
Symfony查询方法实例小结
2017/06/28 PHP
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
小程序实现多选框功能
2018/10/30 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
想学python 这5本书籍你必看!
2018/12/11 Python
python获取服务器响应cookie的实例
2018/12/28 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
跑操口号
2014/06/12 职场文书
西双版纳导游词
2015/02/03 职场文书
总经理司机岗位职责
2015/04/10 职场文书
天气温馨提示语
2015/07/14 职场文书
团队拓展训练感想
2015/08/07 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android