一 获取元素的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. CSV Data Set Config设置

    Jmeter参数化常用的两种方法: 1.使用函数助手 2.CSV Data Set Config 本章主要讲解CSV Data Set Config设置 1.Filename:文件名,指保存信息的文件 ...

  2. java环境的配置与安装（windows、macos、linux）

    一.windows下: 1.下载jdk:https://www.oracle.com2.安装教程:https://www.cnblogs.com/zlslch/p/5658399.html 二.mac ...

  3. 12-01 Java Scanner类，Scanner类中的nextLine()产生的换行符问题

    分析理解:Scanner sc = new Scanner(System.in); package cn.itcast_01; /* * Scanner:用于接收键盘录入数据. * * 前面的时候: ...

  4. 剑指offer二十之包含min函数的栈

    一.题目 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 二.思路 用一个栈dataStack保存数据,用另外一个栈minStack保存依次入栈最小的数.每次元素存入minSt ...

  5. java8之lambda表达式（2）-方法引用

    方法引用使用的地方也是在函数式接口,使用方法引用可以使代码更加简单和便捷 在如下代码中 根据List中字符串长度排序的代码可以写成如下: public static void test1_() { L ...

  6. maven更换源

    1)在 /etc/maven/settings.xml 找到  <mirrors>  </ mirrors>标签,在标签内部 添加内容如下: <mirror>    ...

  7. JS获取当前时间和日期

    当前时间和日期 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1 ...

  8. [开源项目]Shell4Win,一个在Windows下执行shell命令的解释器

    背景 顺利拿到心目中的理想offer之后,心里的负担一下减轻了很多,希望利用还没毕业之前这段难得的悠闲时间做一点有意义的事情.于是希望能做一个长久以来都想做的开源项目,就是题中提到的Windows下的 ...

  9. Deep learning with Python 学习笔记（5）

    本节讲深度学习用于文本和序列 用于处理序列的两种基本的深度学习算法分别是循环神经网络(recurrent neural network)和一维卷积神经网络(1D convnet) 与其他所有神经网络一 ...

  10. 开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现

    项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...