JavaScript--DOM元素尺寸和位置(22)

一获取元素的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)的更多相关文章

第一百一十七节，JavaScript，DOM元素尺寸和位置
学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 1. ...
JavaScript(第二十一天)【DOM元素尺寸和位置】
学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 ...
JS-学习－DOM元素尺寸和位置
一,获取元素的css大小 1.通过style内联获取元素的大小 var box = document.getElementById('box'); // 获得元素; box.style. ...
DOM元素尺寸和位置
一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; / ...
DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)
[1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> ...
深入学习jQuery元素尺寸和位置操作
× 目录 [1]尺寸设置 [2]位置设置前面的话对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...
JavaScript DOM 元素属性状态属性
JavaScript DOM 元素属性状态属性版权声明:未经允许,严禁转载! 元素的属性核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...
jacascript 判断元素尺寸和位置
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! getBoundingClientRect() 判断一个元素的尺寸和位置是简单的方法就是使用 obj.ge ...
使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素然后:secti ...

随机推荐

Python大黑阔—url采集+exp验证，带你批量测试
i春秋作家:大木瓜前言: 最近几天在整理从各处收集来的各种工具包,大大小小的塞满了十几个G的硬盘,无意间发现了一个好几年前的0day.心血来潮就拿去试了一下,没想到真的还可以用,不过那些站点都已经老 ...
JVM锁优化
1. 概述 JDK1.6版本花费了大量精力去实现各种锁优化,如适应性自旋,锁消除,锁粗化,轻量级锁,偏向锁等,这些技术都是为了在线程期间更高效的共享数据,以及解决竞争问题. 2. 自旋锁与自适应自旋 ...
Swift 里字符串（十一）OC 字符串和 Swift 字符串的转换
to OC func _bridgeToObjectiveCImpl() -> AnyObject { if _guts.isSmall { return _guts.asSmall.wit ...
python3 调用 salt-api
使用python3调用 salt-api 在项目中我们不能使用命令行的模式去调用salt-api,所以我们可以写一个基于salt-api的类,方便项目代码的调用.在这里特别附上两种方式实现的pytho ...
Webstorm使用教程详解
Webstorm使用教程详解 Webstorm垂直分栏.左右分栏 Webstorm 主题.背景.颜色等设置的导入导出使用WebStorm开发web前端网页中文乱码问题的解决方案 Webstor ...
mongo数据查询操作
本文来源于 :Stephen Liu 1. 基本查询: 构造查询数据. > db.test.findOne() { "_id" : Ob ...
Google地图开发
配置Google API SDK 如果要想进行Google Map或者说是定位服务的开发,那么肯定需要下载一个新的SDK的支持. 1.点击Android SDK Manager,下载SDK. 2.直接 ...
【转】谷歌三大核心技术（三）Google BigTable中文版
谷歌三大核心技术(三)Google BigTable中文版摘要 Bigtable 是一个分布式的结构化数据存储系统,它被设计用来处理海量数据:通常是分布在数千台普通服务器上的PB级的数据.Goo ...
JavaScript -- TextArea
-----054-TextArea.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...
koa-router post请求接收的参数为空
注:koa-router路由和koa-bodyparser中间件 post请求中参数为空. 页面代码 <!DOCTYPE html> <html> <head> ...

JavaScript--DOM元素尺寸和位置(22)

一 获取元素的CSS大小

二 获取元素实际大小

三 获取元素周边大小

四 getBoundingClientRect()方法

五 小结

JavaScript--DOM元素尺寸和位置(22)的更多相关文章

随机推荐

热门专题

一获取元素的CSS大小

二获取元素实际大小

三获取元素周边大小

五小结