网上有一些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. 2014牡丹江网络zoj3816Generalized Palindromic Number（dfs或者bfs）

    #include <iostream> #include <stdio.h> #include <cmath> #include <algorithm> ...

  2. SQL*Loader之CASE10

    CASE10 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase10.sql rem host write sys$output "Building dem ...

  3. JavaScript的学习--生成二维码

    有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 ...

  4. 单机redis 主从实例

    环境windows xp sp3 1.redis 安装 redis windows安装文件下载地址:http://code.google.com/p/servicestack/wiki/RedisWi ...

  5. 机器学习&数据挖掘笔记_19（PGM练习三：马尔科夫网络在OCR上的简单应用）

    前言: 接着coursera课程:Probabilistic Graphical Models上的实验3,本次实验是利用马尔科夫网络(CRF模型)来完成单词的OCR识别,每个单词由多个字母组合,每个字 ...

  6. 实用js代码大全

    实用js代码大全 //过滤数字 <input type=text onkeypress="return event.keyCode>=48&&event.keyC ...

  7. 在Mac下配置php开发环境：Apache+php+MySql

    /private/etc/apache2/httpd.conf 一.启动Apache sudo apachectl start sudo apachectl -v   可以查看到Apache的版本信息 ...

  8. JAVA 设计模式 观察者模式

    用途 观察者模式 (Observer) 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象. 这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 观 ...

  9. 200、301、302、304、404等HTTP状态码

    在网站建设的实际应用中,容易出现很多小小的失误,就像mysql当初优化不到位,影响整体网站的浏览效果一样,其实,网站的常规http状态码的表现也是一样,Google无法验证网站几种解决办法,提及到由于 ...

  10. 《Inside UE4》-0-开篇

    <Inside UE4>-0-开篇 InsideUE4   前言 VR行业发展是越来越火热了,硬件设备上有HTC VIVE,Oculus rift,PS VR,各种魔镜:平台上有Steam ...