js获取隐藏元素宽高的实现方法

这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下

js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：

function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

但是如果这个元素是隐藏(display:none)的，尺寸又是未知自适应的，哪有上面的方法就不行了！因为display:none的元素是没有物理尺寸的！ 悲剧就这样发生了！

解决思路：

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

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

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

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

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

6. 返回元素宽高值。

代码实现：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

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;      }       } }

注意事项：

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

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

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

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

PS：不能从style.display获取。