JAvascript非表示要素(display:none)の高さと幅を取得する方法(回転)

タイプ:転載時間:2014-06-06
この文章は主に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の  は   なサイズがないからです!  はこうして こった!
 いcssにはvisibility:hiddenがあり、  が えず、display:noneとの  の いはvisibility:hiddenに   なサイズがあることです.   なサイズがあれば  の  でサイズを  できますが、display:noneをvisibility:hiddenに  するとページに きがあります.サイズを  した 、すぐにvisibility:hiddenをdisplay:noneページに  した  でもブレてしまいます.では、この れた  をスクリーンから  したり、ドキュメントフローから れたりするのが  の  です.これは  に  なようですが、  はまた  しました.もしあなたがこの  を   する  、この  は えません.  も います.これはこの  visibility:hiddenです.position: absolute.したがって、  を  した 、スタイルを  します.positionとvisibilityプロパティを のスタイルに すことです.
これがjsが し  を  するサイズの   な    であり、「javascriptに  している」という の  を むことに  があります.
 もここで  なdemoを りました.ソースコードを てみましょう.
 
    










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

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

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

  
  :   なjsのフレームワークでは、jQなどのライブラリがカプセル されています.height()メソッドとwidth()メソッドを  して、     のサイズを    することができます.
  :http://www.jb51.net/article/50758.htm