一 获取元素的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. SpringCloud之Fegin

    Fegin是一个声明似的web服务客户端,它使得编写web服务客户端变得更加容易.使用Fegin创建一个接口并对它进行注解.它具有可插拔的注解支持包括Feign注解与JAX-RS注解,Feign还支持 ...

  2. Linq to xml修改CDATA节点值

    增加节点时,我们是这样写的: xop.Document.Element("messages").Add( new XElement("message", new ...

  3. ThinkPHP5代码执行的简单分析

    漏洞影响版本: ThinkPHP 5.0.5-5.0.22 ThinkPHP 5.1.0-5.1.30 漏洞复现: 一.mac的debug环境搭建. 一键化环境搭建工具: mamp pro ,调试工具 ...

  4. 给1~3年iOS开发 经验朋友们的一些建议（附BAT面试题）

    前言 由于笔者是做 iOS 开发的,因此本文也仅对做 iOS 的同行们有针对性,其他方向仅供参考. 1,如果你: 1~3年左右工作经验,本科,非计算机相关科班出生,学校又比较一般. 实习企业不理想没有 ...

  5. git commit --amend的撤销方法

    某同事执行git commit 时太兴奋,执行了 git commit --amend 慌了,不敢编辑上一个commit的description了,直接选择了wq退出,然而git毕竟强大,默认将改动合 ...

  6. ES6快到碗里来---一个简单的爬虫指南

    学习ES6的时候,没少看ES6入门,到现在也就明白了个大概(惭愧脸).这里不谈ES6,只谈怎么把ES6的页面爬下来放到一起成为一个离线文档. 之前居然没注意过作者把这本书开源了..瞎耽误功夫...地址 ...

  7. 多线程编程——ANR

    1.为什么要用多线程 这里列出几个原因: 提高用户体验或者避免ANR:在事件处理代码中需要使用多线程,否则会出现ANR(Application is not responding),或者因为响应较慢导 ...

  8. wordpress中常用的一些php代码

    <?php the_author(); ?> 显示文章的作者 <?php the_author_description(); ?> 显示文章作者的描述(作者个人资料中的描述) ...

  9. Spring Boot使用JWT实现系统登录验证

    简介 什么是JWT(Json Web Token) jwt是为了在网络应用环境间传递声明而执行的一种基于json的开放标准.该token被设计紧凑且安全的,特别适用于SSO场景.jwt的声明一般被用来 ...

  10. 浅尝Vue.js组件(二)

    本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...