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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 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设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
详解JS模块导入导出
2017/12/20 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Django接受前端数据的几种方法总结
2016/11/04 Python
基于Python的接口测试框架实例
2016/11/04 Python
Python中Threading用法详解
2017/12/27 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
实习单位推荐信范文
2013/11/27 职场文书
领导接待方案
2014/03/13 职场文书
企业员工薪酬方案
2014/06/04 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
英雄儿女观后感
2015/06/09 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python
Python中的程序流程控制语句
2022/02/24 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers