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 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
js点击选择文本的方法
Feb 09 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
通过原生vue添加滚动加载更多功能
Nov 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设计模式之单例模式使用示例
2014/01/20 PHP
php文件读取方法实例分析
2015/06/20 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python分割文件的常用方法
2014/11/01 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
对Python 语音识别框架详解
2018/12/24 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
波兰购物网站:MALL.PL
2019/05/01 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
const和static readonly区别
2013/05/20 面试题
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
雷锋观后感
2015/06/10 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js