一 获取元素的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;                                //

     // 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--DOM元素尺寸和位置(22)的更多相关文章

  1. 第一百一十七节，JavaScript，DOM元素尺寸和位置

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 1. ...

  2. JavaScript(第二十一天)【DOM元素尺寸和位置】

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解.   一．获取元素CSS大小 ...

  3. JS-学习－DOM元素尺寸和位置

    一,获取元素的css大小 1.通过style内联获取元素的大小 var box = document.getElementById('box');    // 获得元素;     box.style. ...

  4. DOM元素尺寸和位置

    一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; / ...

  5. DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

    [1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> ...

  6. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  7. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

  8. jacascript 判断元素尺寸和位置

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! getBoundingClientRect() 判断一个元素的尺寸和位置是简单的方法就是使用 obj.ge ...

  9. 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

    使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...

随机推荐

  1. python 数据类型一 (重点是字符串的各种操作)

    一.python基本数据类型 1,int,整数,主要用来进行数学运算 2,bool,布尔类型,判断真假,True,False 3,str,字符串,可以保存少量数据并进行相应的操作(未来使用频率最高的一 ...

  2. cad2014卸载/安装失败/如何彻底卸载清除干净cad2014注册表和文件的方法

    cad2014提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2014失败提示cad2014安装未完成,某些产品无法安装,也有时候想重新安装cad2014 ...

  3. Node学习笔记---初识Node

    博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/ 如需转载,请在文章开 ...

  4. mybatis四大接口之 ParameterHandler

    1.  继承结构 只有一个默认的实现类 2. ParameterHandler 获取参数对象: 设置参数对象: public interface ParameterHandler { Object g ...

  5. WebDriver高级应用实例（4）

    4.1操作web页面的滚动条 被测网页的网址: http://v.sogou.com Java语言版本的API实例代码 import org.testng.annotations.Test; impo ...

  6. odoo开发笔记-日期时间相关操作

    日期格式化字符串:DATE_FORMAT = "%Y-%m-%d" 日期时间格式字符串:DATETIME_FORMAT = "%Y-%m-%d %H:%M:%S" ...

  7. xamarin 遇到的奇葩问题

    未能找到路径“E:\platforms”的一部分. xamarin 安卓存档出现这样的错误 建议检查下ndk是否配置完整

  8. mac 查询端口被哪个进程占用

    1,查看端口被哪个程序占用sudo lsof -i tcp:port如: sudo lsof -i tcp:80802,看到进程的PID,可以将进程杀死.sudo kill -9 PID如:sudo ...

  9. 五:理解控件的运行机制(例:基于Control命名空间的简单控件)

    一:先用最简短的话说点理论的1.asp.net中所有的标准控件都可以重写 2.和控件相关的命名空间有 System.Web.UI.Control是所有控件的基类只提供简单的呈现逻辑,不支持样式表 Sy ...

  10. rsync实现文件同步

    rsync是类unix系统下的数据镜像备份工工具,一般linux系统都自带了 [可以确认一下:shell>rpm -qa|grep rsync] 服务端:192.168.1.2  同步目录:/h ...