网上有一些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. Java多线程系列--“基础篇”07之 线程休眠

    概要 本章,会对Thread中sleep()方法进行介绍.涉及到的内容包括:1. sleep()介绍2. sleep()示例3. sleep() 与 wait()的比较 转载请注明出处:http:// ...

  2. angular项目总结——angular + browserify + gulp + bower + less 架构分享

    一眨眼,快三个月没有写博客了.一直在为自己没有写博客而懊恼,忙过这段时间,好好总结一下. 新项目主要是自己一个人在写,先搭建了一个初步的架构,用了我并不熟悉的angular,这个过程中,慢慢也熟悉了a ...

  3. 【圣诞特献】Web 前端开发精华文章推荐【系列二十一】

    <Web 前端开发精华文章推荐>2013年第九期(总第二十一期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和  ...

  4. 《HelloGitHub月刊》第05期

    <HelloGitHub>第05期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 欢迎各路人士加入本项目,丰富月刊的内容,也可以直接在Issue(需要登录gi ...

  5. 使用python selenium webdriver模拟浏览器

    selenium是进行web自动化测试的一个工具,支持C,C++,Python,Java等语言,他能够实现模拟手工操作浏览器,进行自动化,通过webdriver驱动浏览器操作,我使用的是chrome浏 ...

  6. 14个HTML5实现的效果合集

    HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品. Form Follows Function就 ...

  7. Java魔法堂：四种引用类型、ReferenceQueue和WeakHashMap

    一.前言 JDK1.2以前只提供一种引用类型——强引用 Object obj = new Object(); .而JDK1.2后我们多另外的三个选择分别是软引用 java.lang.ref.SoftR ...

  8. cdh完美集成kafka

    前言 其实cloudera已经做了这个事了,只是把kafka的包和cdh的parcel包分离了,只要我们把分离开的kafka的服务描述jar包和服务parcel包下载了,就可以实现完美集成了. 具体实 ...

  9. MVVM-Sidekick 之SendToEventRouterAction使用

    在WP开发中点击列表项跳转到详情页是一个很常用的功能,但是有可能项模板中还有其他的区域,比如点击标题跳转到详情页,点击"赞"图标送一个赞,点击"踩"图标踩一下, ...

  10. DataGridView修改HeaderText

    dataGridView_htList为一个 DataGridView(ht为HoverTree的缩写)方法一:dataGridView_htList.Columns["HtAddTime& ...