网上有一些js获取隐藏元素宽高的方法，但是可能会存在某些情况获取不了。

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>test</title>

</head>

<body>

<div id="test" style="display:none">

     我有一壶酒，足以慰风尘。尽倾江海里，赠饮天下人。

</div>

<div id="test2" style="display:none">

     <div style="display:none">

          <div id="test2_child">

               我有一壶酒，足以慰风尘。尽倾江海里，赠饮天下人。

          </div>

     </div>

</div>

<div id="test3">

     <div>

          <div id="test3_child">

               我有一壶酒，足以慰风尘。尽倾江海里，赠饮天下人。

          </div>

     </div>

</div>

</div>

</body>

</html>

test获取得了，但是test2_child是获取不到的。鉴于这种情况，于是自己写了一个方法解决。

解决思路：

1. 获取元素（拿宽高那个）所有隐藏的祖先元素直到body元素，包括自己。

2. 获取所有隐藏元素的style的display、visibility 属性，保存下来。

3. 设置所有隐藏元素为 visibility:hidden;display:block !important;（之所以要important是避免优先级不够）。

4. 获取元素（拿宽高那个）的宽高。

5. 恢复所有隐藏元素的style的display、visibility 属性。

6. 返回元素宽高值。

代码实现：

function getSize(id){

     var width,

          height,

          elem = document.getElementById(id),

          noneNodes = [],

          nodeStyle = [];

     getNoneNode(elem); //获取多层display：none;的元素

     setNodeStyle();

     width = elem.clientWidth;

     height = elem.clientHeight;

     resumeNodeStyle();

     return {

          width : width,

          height : height

     }

     function getNoneNode(node){

          var display = getStyles(node).getPropertyValue('display'),

               tagName = node.nodeName.toLowerCase();

          if(display != 'none'

               && tagName != 'body'){

               getNoneNode(node.parentNode);

          } else {

               noneNodes.push(node);

               if(tagName != 'body')

                    getNoneNode(node.parentNode);

          }

     }

     //这方法才能获取最终是否有display属性设置，不能style.display。

     function getStyles(elem) {

          // Support: IE<=11+, Firefox<=30+ (#15098, #14150)

          // IE throws on elements created in popups

          // FF meanwhile throws on frame elements through "defaultView.getComputedStyle"

          var view = elem.ownerDocument.defaultView;

          if (!view || !view.opener) {

               view = window;

          }

          return view.getComputedStyle(elem);

     };

     function setNodeStyle(){

          var i = 0;

          for(; i < noneNodes.length; i++){

               var visibility = noneNodes[i].style.visibility,

               display = noneNodes[i].style.display,

               style = noneNodes[i].getAttribute("style");

               //覆盖其他display样式

               noneNodes[i].setAttribute("style", "visibility:hidden;display:block !important;" + style);

               nodeStyle[i] = {

                    visibility :visibility,

                    display : display

               }

          }

     }

     function resumeNodeStyle(){

          var i = 0;

          for(; i < noneNodes.length; i++){

               noneNodes[i].style.visibility = nodeStyle[i].visibility;

               noneNodes[i].style.display = nodeStyle[i].display;

          }    

     }

} 

例子演示：

var testSize = getSize('test');

console.log("test-> width:" + testSize.width + " height:" + testSize.height);

var test2ChildSize2 = getSize('test2_child');

console.log("test2Child2-> width:" + test2ChildSize2.width + " height:" + test2ChildSize2.height);

var test3ChildSize = getSize('test3_child');

console.log("test3_child-> width:" + test3ChildSize.width + " height:" + test3ChildSize.height);     

//打印值如下

test-> width:417 height:18

test2Child2-> width:417 height:18

test3_child-> width:417 height:18

注意事项：

1. 打开显示所有隐藏祖先元素，然后获取元素的宽高值，可能在某些情况下获取值是不正确的。

PS：不过这个不用担心，真正出错时再hack方法就行。

2. 之所以要保存隐藏祖先元素display、visibility 属性，是为了后面可以设置回来，不影响其本身。

3. 另外getStyles方法是从jquery源码中摘取出来，这方法才能获取最终是否有display属性设置。

PS：不能从style.display获取。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5506430.html

js获取隐藏元素宽高的方法的更多相关文章

  1. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  2. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  3. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  4. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  5. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  6. js 常用 DOM 元素宽高

    提示:document.documentElement 和 document.getElementsByTagName('html')[0] 是一样的: 1.视口大小(不包括滚动条,视口字面理解当然是 ...

  7. js获取屏幕以及元素宽高的方法

    一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:w ...

  8. JS 获取网页的宽高

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  9. JS获取当前屏幕宽高

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

随机推荐

  1. selenium-webdriver(python) (十三) -- cookie处理

    本节重点: driver.get_cookies() 获得cookie信息 add_cookie(cookie_dict)  向cookie添加会话信息 delete_cookie(name)   删 ...

  2. GIF录制神器GifCam

    前几天偶然看到一款神器:GifCam! GifCam是什么? 一款录制gif动画图片的小软件,小到不足一兆. 使用方法(简单到不可思议) 百度 GifCam 下载: 不用安装,直接打开gifcam: ...

  3. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

  4. Git学习笔记（四）

    一.忽略特殊文件 在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略这些文件. 不需要从头写.gitignore文件,GitHub已经为我们 ...

  5. 图论 --- spfa + 链式向前星 (模板题) dlut 1218 : 奇奇与变形金刚

    1218: 奇奇与变形金刚 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 130  Solved: 37[Submit][Status][Web Boa ...

  6. Net.Sockets

    #region 程序集 System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 // C:\Program ...

  7. setTimeout，setInterval，process.nextTick，setImmediate in Nodejs

    Nodejs的特点是事件驱动,异步I/O产生的高并发,产生此特点的引擎是事件循环,事件被分门别类地归到对应的事件观察者上,比如idle观察者,定时器观察者,I/O观察者等等,事件循环每次循环称为Tic ...

  8. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  9. .NET Core 调用WCF 服务

    .NET Core 和ASP.NET Core 已经可以调用WCF 服务. 环境要求: VS2015 Update 2 +VS2015 Tooling + .NET Core SDK 下载地址: ht ...

  10. Redis系列二之事务及消息通知

    一.事务 Redis中的事务是一组命令的集合.一个事务中的命令要么都执行,要么都不执行. 1.事务简介 事务的原理是先将一个事务的命令发送给Redis,然后再让Redis依次执行这些命令.下面看一个示 ...