js獵取隱蔽元素寬高的實(shí)現(xiàn)方法_

1、js獵取隱蔽元素寬高的實(shí)現(xiàn)方法_ 下面我就為大家?guī)?lái)一篇js獵取隱蔽元素寬高的實(shí)現(xiàn)方法。我覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。 網(wǎng)上有一些js獵取隱蔽元素寬高的方法，但是可能會(huì)存在某些狀況獵取不了。 例如： !DOCTYPE html html lang=en head meta http-equiv=Content-Type content=text/html;charset=UTF-8 / titletest/title /head body div id=test style=display:none 我有一壺酒，足以慰風(fēng)塵。盡傾江海里，贈(zèng)飲天下人。 /div div id=

2、test2 style=display:none div style=display:none div id=test2_child 我有一壺酒，足以慰風(fēng)塵。盡傾江海里，贈(zèng)飲天下人。 /div /div /div div id=test3 div div id=test3_child 我有一壺酒，足以慰風(fēng)塵。盡傾江海里，贈(zèng)飲天下人。 /div /div /div /div /body /html test獵取得了，但是test2_child是獵取不到的。鑒于這種狀況，于是自己寫(xiě)了一個(gè)方法解決。 解決思路： 1. 獵取元素（拿寬高那個(gè)）全部隱蔽的祖先元素直到body元素，包括自己。 2. 獵取全

3、部隱蔽元素的style的display、visibility 屬性，保存下來(lái)。 3. 設(shè)置全部隱蔽元素為 visibility:hidden;display:block !important;（之所以要important是避開(kāi)優(yōu)先級(jí)不夠）。 4. 獵取元素（拿寬高那個(gè)）的寬高。 5. 復(fù)原全部隱蔽元素的style的display、visibility 屬性。 6. 返回元素寬高值。 代碼實(shí)現(xiàn)： function getSize(id) var width, height, elem = document.getElementById(id), noneNodes = , nodeStyle =

4、 ; 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(dis

5、play != none tagName != body) getNoneNode(node.parentNode); else noneNodes.push(node); if(tagName != body) getNoneNode(node.parentNode); /這方法才能獵取最終是否有display屬性設(shè)置，不能style.display。 function getStyles(elem) / Support: IE=11+, Firefox=30+ (#15098, #14150) / IE throws on elements created in popups / FF m

6、eanwhile 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 = noneNodesi.style.visibili

7、ty, display = noneNodesi.style.display, style = noneNodesi.getAttribute(style); /掩蓋其他display樣式 noneNodesi.setAttribute(style, visibility:hidden;display:block !important; + style); nodeStylei = visibility :visibility, display : display function resumeNodeStyle() var i = 0; for(; i noneNodes.length; i

8、+) noneNodesi.style.visibility = nodeStylei.visibility; noneNodesi.style.display = nodeStylei.display; 例子演示： var testSize = getSize(test); console.log(test- width: + testSize.width + height: + testSize.height); var test2ChildSize2 = getSize(test2_child); console.log(test2Child2- width: + test2ChildS

9、ize2.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 留意事項(xiàng)： 1. 打開(kāi)顯示全部隱蔽祖先元素，然后獵取元素的寬高值，可能在某些狀況下獵取值是不正確的。 PS：不過(guò)這個(gè)不用擔(dān)憂，真正出錯(cuò)時(shí)再hack方法就行。 2. 之所以要保存隱蔽祖先元素display、visibility 屬性，