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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jquery 图片轮换效果
Jul 29 Javascript
Javascript玩转继承(一)
May 08 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
es6函数之尾递归用法实例分析
Apr 25 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中的Class的几点个人看法
2006/10/09 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
js控制input输入字符解析
2013/12/27 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
javascript表单验证大全
2015/08/12 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Django框架视图函数设计示例
2019/07/29 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
英国复古服装购物网站:Collectif
2019/10/30 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
校园门卫岗位职责
2013/12/09 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
小学学校评估方案
2014/06/08 职场文书
小学生环保标语
2014/06/13 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
技术股东合作协议书
2014/12/02 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL