JavaScript获取元素尺寸和大小操作总结


Posted in Javascript onFebruary 27, 2015

一、获取元素的行内样式

var obj = document.getElementById("test");

alert(obj.height + "\n" + obj.width);

// 200px 200px typeof=string只是将style属性中的值显示出来

二、获取计算后的样式

var obj = document.getElementById("test");

var style = null;

if (window.getComputedStyle) {

    style = window.getComputedStyle(obj, null);    // 非IE

} else { 

    style = obj.currentStyle;  // IE

}

alert("width=" + style.width + "\nheight=" + style.height);

注意:如果不设置元素的宽度和高度,那么在非IE浏览器下返回默认的宽度和高度。在IE下面返回auto字符串

三、获取<link>和<style>标签写入的样式

var obj = document.styleSheets[0]; // [object StyleSheetList] 样式表的个数<link>var rule = null;// [object CSSRule]

if (obj.cssRules){

    rule = obj.cssRules[0];  // 非IE [object CSSRuleList]

} else {

    rule = obj.rules[0];     // IE [object CSSRuleList]

} 

alert(rule.style.width);

cssRules(或rules)只能获取到内联和链接样式的宽和高,不能获取到行内和计算后的样式。

总结:以上的三种CSS获取元素大小的方法,只能获取元素的CSS大小,却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的。

四、获取元素的实际大小

1. clientWidth和clientHeight
    这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小。返回了元素大小,但没有单位,默认单位是px,如果你强行设置了单位,比如100em之类,它还是会返回px的大小。(CSS获取的话,是照着你设置的样式获取)。对于元素的实际大小,clientWidth和clientHeight理解方式如下:
    a. 增加边框,无变化;
    b. 增加外边距,无变化;
    c. 增加滚动条,最终值等于原本大小减去滚动条的大小;
    d. 增加内边距,最终值等于原本大小加上内边距的大小;

<div id="test"></div>

#test{

    background-color: green;

    width: 200px;

    height: 200px;

    border: solid 5px red;  /* 对应a理解,结果:200,200 */

    margin: 10px;  /* 对应b理解,结果:200,200*/

    padding: 20px;  /* 对应c理解,结果:240,240*/

    overflow: scroll;  /* 对应d理解,结果:223,223,223=200(css大小)+40(两边内边距)-17(滚动条宽度)*/

}

window.onload = function(){

    var obj = document.getElementById("test");

    alert(obj.clientWidth + "," + obj.clientHeight);

};

注意:如果说没有设置任何CSS的宽和高度,那么非IE浏览器会算上滚动条和内边距的计算后的大小,而IE浏览器则返回0(IE8已修复)。

2. scrollWidth和scrollHeight
    这组属性可以获取滚动内容(可见内容)的元素大小。返回了元素大小,默认单位是px。如果没有设置任何CSS的宽和高度,它会得到计算后的宽度和高度。对于元素的实际大小,scrollWidth和scrollHeight理解如下:
    1. 增加边框,不同浏览器有不同解释(下面在IE8中运行正常,IE6运行不正常):
a) Firefox和Opera浏览器会增加边框的大小,220x220
b) IE、Chrome和Safari浏览器会忽略边框大小,200x200
c) IE浏览器只显示它本来内容的高度,200x18(IE8已经修改该问题)
    2. 增加内边距,最终值会等于原本大小加上内边距大小,220x220,IE为220x38
    3. 增加滚动条,最终值会等于原本大小减去滚动条大小,184x184,IE为184x18
    4. 增加外边据,无变化。
    5. 增加内容溢出,Firefox、Chrome和IE获取实际内容高度,Opera比前三个浏览器获取的高度偏小,Safari比前三个浏览器获取的高度偏大。

3. offsetWidth和offsetHeight
    这组属性可以返回元素实际大小,包含边框、内边距和滚动条。返回了元素大小,默认单位是px。如果没有设置任何CSS的宽和高度,他会得到计算后的宽度和高度。对于元素的实际大小,offsetWidth和offsetHeight理解如下:
    1.增加边框,最终值会等于原本大小加上边框大小,为220;
    2.增加内边距,最终值会等于原本大小加上内边距大小,为220;
    3.增加外边据,无变化;
    4.增加滚动条,无变化,不会减小;
    对于元素大小的获取,一般是块级(block)元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦,所以,建议使用的时候注意。

<div id="test">test div element</div>

#test{

    background-color: green;

    width: 200px;

    height: 200px;

    border: solid 10px red; /*结果:220,220*/

    margin: 10px; /*结果:220,220(无变化)*/

    padding: 10px; /*结果:240,240*/

    overflow:scroll; /*结果:240,240(无变化)*/

}

window.onload = function(){

    var obj = document.getElementById("test");

    alert(obj.offsetWidth + "," + obj.offsetHeight);

};

五、获取元素周边大小
1. clientLeft和clientTop获取边框大小
    这组属性可以获取元素设置了左边框和上边框的大小。目前只提供了Left和Top这组,并没有提供Right和Bottom。如果四条边宽度不同的话,可以直接通过计算后的样式获取,或者采用以上三组获取元素大小的减法求得。
右边框的宽度:obj.offsetWidth-obj.clientWidth-obj.clientLeft
底边框的宽度:obj.offsetHeight-obj.clientHeight-obj.clientTop

<div id="test">test div element</div>

#test{

    background-color: green;

    width: 200px;

    height: 200px;

    border-top: solid 10px red;s

    border-right: solid 20px #00ff00;

    border-bottom: solid 30px blue;

    border-left: solid 40px #808080; 

}

window.onload = function(){

    var obj = document.getElementById("test");

    alert(obj.clientLeft + "," + obj.clientTop); // 40,10

};

2. offsetLeft和offsetTop   
    这组属性可以获取当前元素相对于父元素的位置。获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;否则不同的浏览器会有不同的解释。
a、将position设置为absolute,则所有浏览器返回一样的值。如:

<div id="test">test div element</div>

#test{

    background-color: green;

    width: 200px;

    height: 200px;

    position: absolute;

    left: 30px;

    top: 20px;

}

window.onload = function(){

    var obj = document.getElementById("test");

    alert(obj.offsetLeft + "," + obj.offsetTop); // 30, 20

};

b、加上边框和内边距不会影响它的位置,但加上外边据会累加。

3、box.offsetParent得到父元素
    offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE(IE6)返回html对象。如果两个元素嵌套,如果上父元素没有使用定位position:absolute,那么offsetParent将返回body对象或html对象。所以,在获取offsetLeft和offsetTop时候,CSS定位很重要。
    如果说,在很多层次里,外层已经定位,我们怎么获取里层的元素距离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;

}

4.scrollTop和scrollLeft
    这组属性可以获取滚动条被隐藏(滚动条上方区域)的区域大小,也可设置定位到该区域。如果要让滚动条滚动到最初始的位置,那么可以写一个函数:

function scrollStart (element) {

    if ( element.scrollTop != 0 ) {

        element.scrollTop = 0;

    }

}

5、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);         // 元素左边距离页面左边的距离

注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。

document.documentElement.clientTop; //非IE为0,IE为2

document.documentElement.clientLeft; //非IE为0,IE为2

functiongGetRect (element) {

    var rect = element.getBoundingClientRect();

    var top = document.documentElement.clientTop;

    var left= document.documentElement.clientLeft;

    return{

        top  :   rect.top - top,

        bottom  :   rect.bottom - top,

        left  :   rect.left - left,

        right  :    rect.right - left

    }

}

分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。

以上就是本文所述的全部内容了,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
js中判断控件是否存在
Aug 25 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
动态加载js文件简单示例
Apr 21 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 #Javascript
Javascript writable特性介绍
Feb 27 #Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 #Javascript
JavaScript函数详解
Feb 27 #Javascript
浅谈JavaScript的事件
Feb 27 #Javascript
JS实现图片放大镜效果的方法
Feb 27 #Javascript
浅谈javascript中的instanceof和typeof
Feb 27 #Javascript
You might like
一个SQL管理员的web接口
2006/10/09 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php自定义分页类完整实例
2015/12/25 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
Cookie 小记
2010/04/01 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python设置环境变量的原因和方法
2019/06/24 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python多线程获取返回值代码实例
2020/02/17 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
Python 里最强的地图绘制神器
2021/03/01 Python
社区安全检查制度
2014/02/03 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
党委班子对照检查材料
2014/08/19 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server