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 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
jQuery实现大图轮播
Feb 13 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 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函数
2017/01/15 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Vue.js实现表格渲染的方法
2018/09/07 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
详解django三种文件下载方式
2018/04/06 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python实现列表的排序方法分享
2019/07/01 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
办理生育手续介绍信
2014/01/14 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
MySQL学习之基础命令实操总结
2022/03/19 MySQL