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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
javascript 三种编解码方式
Feb 01 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
回顾Javascript React基础
Jun 15 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
星际争霸中的热键
2020/03/04 星际争霸
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php实现的日历程序
2015/06/18 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
python入门教程之识别验证码
2017/03/04 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python如何从文件读取数据及解析
2019/09/19 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
个人简历中自我评价
2014/02/11 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
2014年民警工作总结
2014/11/25 职场文书
门面房租房协议书
2014/12/01 职场文书
离婚协议书范文2016
2016/03/18 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python