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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
React实现动效弹窗组件
Jun 21 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语法(2)
2006/10/09 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python 链接和操作 memcache方法
2017/03/04 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python模块的加载讲解
2019/01/15 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
体育活动总结范文
2014/05/04 职场文书
2014年图书室工作总结
2014/12/09 职场文书
户外亲子活动总结
2015/05/08 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python