网上有一些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. Uvaoj10054 - The Necklace

    /* 题意:打印欧拉回路! 思路:开始时不明白,dfs为什么是后序遍历? 因为欧拉回路本身是一条回路,那么我们在dfs时,可能存在提前找到回路,这条回路可能不是欧拉回路, 因为没有遍历完成所有的边!如 ...

  2. 构建自己的PHP框架--搭建基本结构

    首先,我们来说一下,为什么要创建自己的框架? 为什么要创建自己的框架呢?如果你跟周围的人讨论,每个人都会告诉你重复发明轮子是一件糟糕的事情,你最好选择一个已有的框架,忘掉“创建自己的框架”这种想法.大 ...

  3. [OpenCV] Samples 08: edge

    Canny edge detector 效率高,效果可控. TrackBar的使用. 技巧:gray找边缘后作为mask去CopyTo(). #include "opencv2/core/u ...

  4. javaWeb之maven多数据库环境的配置信息

    在使用maven构建的web项目里,不管采用的是什么orm框架,数据库写死了必然不是最灵活的方式.所以通过maven 的buid方式可以动态的分配数据库信息 比如在jdbc.properties中,可 ...

  5. 漫谈可视化Prefuse（三）---Prefuse API数据结构阅读有感

    前篇回顾:上篇<漫谈可视化Prefuse(二)---一分钟学会Prefuse>主要通过一个Prefuse的具体实例了解了构建一个Prefuse application的具体步骤.一个Pre ...

  6. Java性能优化

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 注:里面的测试结果会因电脑配置的不同而有所差异!!! 1. 为一些集合定义初始化大小 List.Set.Map都 ...

  7. 年度榜单：2013年最佳免费 PSD 设计素材揭晓

    <年度榜单>系列继续给大家带来2013年度发布的好东西,这篇文章要给大家分享的是本年度最佳的12套精美的 PSD 设计素材,你可以免费下载使用.这些免费素材不仅能帮助他们节省大量的时间,而 ...

  8. qml基础学习 Canvas画笔

    一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...

  9. 关于MVC中模型model的验证问题

    今天在做项目练习的时候发现,MVC中使用自带的模型验证时会提前显示在界面上,比如下面所示: 这是什么原因了,是因为我在表示get请求的action里面返回了其界面所显示使用的model,我们知道mvc ...

  10. 页面置换算法 - FIFO、LFU、LRU

    缓存算法(页面置换算法)-FIFO. LFU. LRU 在前一篇文章中通过leetcode的一道题目了解了LRU算法的具体设计思路,下面继续来探讨一下另外两种常见的Cache算法:FIFO. LFU ...