javascript获取隐藏元素(display:none)的高度和宽度的方法


Posted in Javascript onJune 06, 2014

js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法:

function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

但是如果这个元素是隐藏(display:none)的,尺寸又是未知自适应的,哪有上面的方法就不行了!因为display:none的元素是没有物理尺寸的! 悲剧就这样发生了!

幸好css中还有visibility:hidden,不可见属性,他和display:none最大的区别就是visibility:hidden有物理尺寸。有物理尺寸就可以通过上面的方法获取尺寸,但是将display:none改成visibility:hidden后页面就有一块空白在那里,即使在你获取尺寸后在马上将visibility:hidden改成display:none页面那部分还是会抖动一下。那么最好的办法就是将这个隐藏的元素移出屏幕或者脱离文档流( position: absolute)。这样似乎非常完美了,但是悲剧又发生了,如果你要再显示这个元素的时侯这个元素是不可见的,位置也不对,因为这是这个元素visibility:hidden;position: absolute。所以在获取尺寸后还要将样式还原回去。就是将position和visibility属性设回原来的样式。

这就是js获取隐藏元素的尺寸基本实现方式,大家有兴趣可以看看《精通javascript》这本书上的方法。

我这里也做了个简单的demo,大家可以看看源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js获取隐藏元素的尺寸</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>
</head>
<body>
 <div id="test_display_block" style="display:none; border:10px solid #CDCDCD; margin-left: 100px">这是test容器,可见容器<br />这是test容器,可见容器<br />这是test容器,可见容器<br />这是test容器,可见容器<br />这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br /></div>
 <div id="test_display_none" style="display:none; border:10px solid #CDCDCD">这是test容器,这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br /></div>
        <div id="test_display_click">点我</div>
        <script type="text/javascript">
            //判断对象类型
 function getType(o){
            var _t;
            return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
        }
        //获取元素样式
 function getStyle(el, styleName) {
            return el.style[styleName] ? el.style[styleName] : el.currentStyle ? el.currentStyle[styleName] : window.getComputedStyle(el, null)[styleName];
        }
 function getStyleNum(el, styleName) {
            return parseInt(getStyle(el, styleName).replace(/px|pt|em/ig,''));
        }
 function setStyle(el, obj){
  if (getType(obj) == "object") {
   for (s in obj) {
    var cssArrt = s.split("-");
    for (var i = 1; i < cssArrt.length; i++) {
     cssArrt[i] = cssArrt[i].replace(cssArrt[i].charAt(0), cssArrt[i].charAt(0).toUpperCase());
    }
    var cssArrtnew = cssArrt.join("");
    el.style[cssArrtnew] = obj[s];
   }
  }
  else 
   if (getType(obj) == "string") {
    el.style.cssText = obj;
   }
 }
 function getSize(el) {
        if (getStyle(el, "display") != "none") {
            return { width: el.offsetWidth || getStyleNum(el, "width"), height: el.offsetHeight || getStyleNum(el, "height") };
        }
        var _addCss = { display: "", position: "absolute", visibility: 'hidden' };
        var _oldCss = {};
        for (i in _addCss) {
            _oldCss[i] = getStyle(el, i);
        }
 setStyle(el, _addCss);
        var _width = el.clientWidth || getStyleNum(el, "width");
        var _height = el.clientHeight || getStyleNum(el, "height");
        for (i in _oldCss) {
            setStyle(el, _oldCss);
        }
        return { width: _width, height: _height };
    } 
var dd=document.getElementById("test_display_block");   
alert(getSize(dd).height); 
document.getElementById("test_display_click").onclick=function(){
 dd.style.display="block";
        document.getElementById("test_display_none").style.display="block";
}
alert($("#test_display_none").height());
 </script>
</body>
</html>

题外话:一般js的框架,库都已经封装了这个方法,比如jQ,我们可以直接使用 height()和width()方法获取隐藏元素的尺寸。

Javascript 相关文章推荐
javascript function、指针及内置对象
Feb 19 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
Vue3为什么这么快
Sep 23 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
Vue实现简单计算器
Jan 20 Vue.js
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 #Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 #Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 #Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 #Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 #Javascript
javascript中的return和闭包函数浅析
Jun 06 #Javascript
seaJs的模块定义和模块加载浅析
Jun 06 #Javascript
You might like
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python判断变量是否为列表的方法
2020/09/17 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
个人实习生的自我评价
2014/02/16 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
护士岗前培训心得体会
2016/01/08 职场文书