javascript隠し要素の高さと幅を取得する方法

jsは可視元素のサイズを取得するのに便利です.これは直接にこの方法を使うことができます.

 
  
function getDefaultStyle(obj,attribute){ //         ，  IE DOM，    ：    、     
  
 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]; 
  
} 
  
 
 

しかし、この要素が隠れていたら、サイズは未知適応です.上の方法があったらだめです.display:noneの元素は物理サイズがないからです.悲劇はこのように発生しました!
幸いcssにはvisibility:hiddenがあります.属性は見えません.彼とdisplay:noneの最大の違いはvisibility:hiddenは物理サイズがあります.物理サイズがあれば上記の方法でサイズを取得できますが、display:noneをvisibility:hiddenに変更したらページに空きがあります.サイズを取ったらすぐにvisibility:hiddenをdisplay:noneページに変更しても、その部分はぶれます.一番いい方法は、この隠れた要素をスクリーンから移動するか、またはドキュメントフローから離れることです.このように非常に完璧なようですが、悲劇がまた発生しました.もしこの元素をもう一度表示するなら、この元素は見えないです.位置も違います.これはこの元素のvisibility:hiddenです.position:absolute.サイズを取ったら元に戻します.positionとvisibility属性を元のスタイルに戻すということです.
これはjsが元素のサイズを隠して基本的な実現方法を獲得して、みんなは《javascriptに精通します》のこの本の上の方法を見ることができる興味があります.
私も簡単なデモをしました.ソースコードを見てもいいです.

 
   
  







 
  
 
  test  ，    
  test  ，    
  test  ，    
  test  ，    
  test  ，
  test  ，
  test  ，
  test  ，
  test  ，

 
  test  ，  test  ，
  test  ，
  test  ，
  test  ，
  test  ，
  test  ，

        
  

        <br>            //      <br> function getType(o){<br>            var _t;<br>            return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();<br>        }<br>        //      <br> function getStyle(el, styleName) {<br>            return el.style[styleName] ? el.style[styleName] : el.currentStyle ? el.currentStyle[styleName] : window.getComputedStyle(el, null)[styleName];<br>        }<br> function getStyleNum(el, styleName) {<br>            return parseInt(getStyle(el, styleName).replace(/px|pt|em/ig,''));<br>        }<br> function setStyle(el, obj){<br>  if (getType(obj) == "object") {<br>   for (s in obj) {<br>    var cssArrt = s.split("-");<br>    for (var i = 1; i < cssArrt.length; i++) {<br>     cssArrt[i] = cssArrt[i].replace(cssArrt[i].charAt(0), cssArrt[i].charAt(0).toUpperCase());<br>    }<br>    var cssArrtnew = cssArrt.join("");<br>    el.style[cssArrtnew] = obj[s];<br>   }<br>  }<br>  else <br>   if (getType(obj) == "string") {<br>    el.style.cssText = obj;<br>   }<br> }<br> function getSize(el) {<br>        if (getStyle(el, "display") != "none") {<br>            return { width: el.offsetWidth || getStyleNum(el, "width"), height: el.offsetHeight || getStyleNum(el, "height") };<br>        }<br>        var _addCss = { display: "", position: "absolute", visibility: 'hidden' };<br>        var _oldCss = {};<br>        for (i in _addCss) {<br>            _oldCss[i] = getStyle(el, i);<br>        }<br> setStyle(el, _addCss);<br>        var _width = el.clientWidth || getStyleNum(el, "width");<br>        var _height = el.clientHeight || getStyleNum(el, "height");<br>        for (i in _oldCss) {<br>            setStyle(el, _oldCss);<br>        }<br>        return { width: _width, height: _height };<br>    } <br>var dd=document.getElementById("test_display_block");   <br>alert(getSize(dd).height); <br>document.getElementById("test_display_click").onclick=function(){<br> dd.style.display="block";<br>        document.getElementById("test_display_none").style.display="block";<br>}<br>alert($("#test_display_none").height());<br> 

 
   
 

余談:一般的なjsのフレームワークは、jQなどのライブラリに封入されています.私たちは直接にheight()とwidth()の方法を使って、隠し要素のサイズを取得することができます.