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 ui dialog里调用datepicker的问题
Aug 06 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
谈谈JavaScript中的函数
Sep 08 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的历史和优缺点
2006/10/09 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
js禁止浏览器的回退事件
2017/04/20 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Python脚本实现12306火车票查询系统
2016/09/30 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
关于VPN
2012/06/10 面试题
求职简历自荐信
2014/06/18 职场文书
考研复习计划
2015/01/19 职场文书
企业文化学习心得体会
2016/01/21 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Python天气语音播报小助手
2021/09/25 Python