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下string.format函数补充
Aug 24 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
写gulp遇到的ES6问题详解
Dec 03 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
PHP的FTP学习(三)
2006/10/09 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
JS 表单验证大全
2011/11/23 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python使用json序列化datetime类型实例解析
2018/02/11 Python
详解python:time模块用法
2019/03/25 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
总裁秘书岗位职责
2013/12/04 职场文书
会计顶岗实习心得
2014/01/25 职场文书
对祖国的寄语大全
2014/04/11 职场文书
安全生产计划书
2014/05/04 职场文书
消防宣传口号
2014/06/16 职场文书
电子工程求职信
2014/07/17 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL