网上有一些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. 【原创】.NET读写Excel工具Spire.Xls使用(1)入门介绍

    在.NET平台,操作Excel文件是一个非常常用的需求,目前比较常规的方法有以下几种: 1.Office Com组件的方式:这个方式非常累人,微软的东西总是这么的复杂,使用起来可能非常不便,需要安装E ...

  2. SQL*Loader之CASE1

    最近项目涉及到将文本文件中的数据导入到Oracle数据库中,故研究了下SQL*Loader,官档提供的资料不是很丰富,很多案例中出现的语句在官档中找不到出处.但它提供的案例本身却彰显出了SQL*Loa ...

  3. Dijkstra算法(二)之 C++详解

    本章是迪杰斯特拉算法的C++实现. 目录 1. 迪杰斯特拉算法介绍 2. 迪杰斯特拉算法图解 3. 迪杰斯特拉算法的代码说明 4. 迪杰斯特拉算法的源码 转载请注明出处:http://www.cnbl ...

  4. Java多线程系列--“JUC原子类”03之 AtomicLongArray原子类

    概要 AtomicIntegerArray, AtomicLongArray, AtomicReferenceArray这3个数组类型的原子类的原理和用法相似.本章以AtomicLongArray对数 ...

  5. PHP 字符串函数

    字符串是字符序列,比如 "Hello world!". PHP 字符串函数 在本节中,我们将学习常用的字符串操作函数. PHP strlen() 函数 strlen() 函数返回字 ...

  6. WEB编程中获取src目录下的文件（没有src目录）

    这种情况遇见的会比较多,像一个WEB工程,如果在src下面写了一个xml或者一些其它的文件,当工程发布到服务器时,web程序是在tomcat等服务器下运行这个程序的,这个时候,程序目录里面并没有src ...

  7. oracle创建表相关

    --创建表 create table person( id number primary key, name ), birth date ); --创建序列 create sequence perso ...

  8. 在SQL Server里为什么我们需要更新锁

    今天我想讲解一个特别的问题,在我每次讲解SQL Server里的锁和阻塞(Locking & Blocking)都会碰到的问题:在SQL Server里,为什么我们需要更新锁?在我们讲解具体需 ...

  9. 说说我在项目中为什么不用实体框架,如果说我在诋毁你所爱的EF,请进来.

    1.坑多. 这一点没有人会否定.当然你可以说你很牛,但事实不会因为你牛就可以说不存在.从博客园中的博问中大家关于EF的提问量就问题的怪异程度就可以看出来. 1.Entity Framework 查询历 ...

  10. Python生成二维码脚本

    简单的记录下二维码生成和解析的Python代码 依赖下面三个包: PIL(图像处理包,安装:pip install PIL) qrcode(二维码生成包,安装:pip install qrcode) ...