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 相关文章推荐
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
JavaScript验证知识整理
Mar 24 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
React优化子组件render的使用
May 12 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
第1次亲密接触PHP5(1)
2006/10/09 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
python 并发下载器实现方法示例
2019/11/22 Python
python常用运维脚本实例小结
2020/02/14 Python
Python PyQt5整理介绍
2020/04/01 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
女大学生自我鉴定
2013/12/09 职场文书
给面试官的感谢信
2014/02/01 职场文书
个性与发展自我评价
2014/02/11 职场文书
企业文化理念标语
2014/06/10 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
要账委托书范本
2014/09/15 职场文书
2014年财政所工作总结
2014/11/22 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
带你了解Java中的ForkJoin
2022/04/28 Java/Android