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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
js有序数组的连接问题
Oct 01 Javascript
浅析node.js中close事件
Nov 26 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
javascript中 try catch用法
Aug 16 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
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中mysql操作buffer用法详解
2015/03/19 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python制作最美应用的爬虫
2015/10/28 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
对python中return与yield的区别详解
2020/03/12 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
Python 内存管理机制全面分析
2021/01/16 Python
帕克纽约:PARKER NY
2018/12/09 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
创意活动策划书
2014/01/15 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
小学英语听课心得体会
2016/01/14 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript