一 获取元素的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. collections, time, queue的应用

    collections  (克来克深思) Counter from collections import Counter # 引入模块, 计数器 Counter(康特) s = 'sadfasdfas ...

  2. Linux学习笔记-基本操作4

    1. gdb调试2. makefile的编写3. 系统IO函数 1. gdb调试:        1. 启动gdb + 可执行文件        2. 查看代码:                l== ...

  3. iOS-发送短信验证码倒计时

    /** 发送手机验证码 */ -(void)startSenderYzmMessage{ __block ; //倒计时时间 dispatch_queue_t queue = dispatch_get ...

  4. python3模块: requests

    Python标准库中提供了:urllib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最简单的任务. 发送G ...

  5. Log4j 相关

    Log4j(Log for Java) Log4j是Apache提供的一种专门用于Java程序记录日志的工具,是目前主流的开发日志技术. 日志的作用: 1.记录系统运行过程中的重要运行信息 a) 付费 ...

  6. Python：使用异常处理来判断运行的平台

    try: import termios, TERMIOS 1 except ImportError: try: import msvcrt 2 except ImportError: try: fro ...

  7. 链表的反转、合并(不借助额外list数组)

    链表的基本操作:线性表 (单链表.循环链表-python实现) 反转链表: # -*- coding:utf-8 -*- class ListNode: def __init__(self, x): ...

  8. Mac 下安装.NET Core 与 CLI

    .NET Foundation:https://github.com/dotnet/home .NET Core:https://github.com/dotnet/coreclr CLI:https ...

  9. linux使用find和crontab命令定期清理过期文件

    crontab 命令 crontab 命令是 Linux 中用来设定重复执行命令或脚本的工具.它能够在指定的时间段内,按照需求以某一时间间隔执行命令或脚本. crontab 的基本用法 crontab ...

  10. 02-03:springboot 整合listener

    1.通过注解扫描完成Listener组件的注册 1.1 编写listener /** * Springboot 整合listener */ import javax.servlet.ServletCo ...