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中的Split使用方法与技巧
Mar 09 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
Openlayers绘制聚合标注
Sep 28 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文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php上传大文件设置方法
2016/04/14 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
RC4文件加密的python实现方法
2015/06/30 Python
python Django模板的使用方法
2016/01/14 Python
详解python3中tkinter知识点
2018/06/21 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python实现五子棋小程序
2019/06/18 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
美发店5.1活动方案
2014/01/24 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2014年接待工作总结
2014/11/26 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
canvas实现贪食蛇的实践
2022/02/15 Javascript
nginx rewrite功能使用场景分析
2022/05/30 Servers
Redis唯一ID生成器的实现
2022/07/07 Redis