javascript取得隱藏dom的寬高 具體實作_javascript技巧

首先clone一個DOM，設定position:absolute，然後設定top為一個比較大的負值，然後使其顯示出來，最後取得到了DOM的寬高後，將其remove。
具體代碼如下：
Js代碼

複製代碼 代碼如下:

function getCss(elem, css){ 
 if (window.getComputedStyle) { 
  return window.getComputedStyle(elem, null)[css]; 
 . elem.currentStyle[css]; 
 }else { 
  return elem.style[css]; 
 } 
} 
function getWH(){em
){ 
  var wh = {}; 
  'Width Height'.replace(/[^ ] /g, function(i){ 
   var a = i.toLowerCase(); 
   wh a = i.toLowerCase(); 
   wh a] = elem['offset' i] || elem['client' i]; 
  }); 
  return wh; 
 }; 
 if (getCss(dom, 'display)(dom, 'display 是=== 'none') { 
  var nDom = dom.cloneNode(true); 
  nDom.style.position = 'absolute'; 
  nDom.style.top = '-3000px' >  nDom.style.display = 'block'; 
  document.getElementsByTagName('body')[0].appendChild(nDom); 
  var wh = get(nDom);    return wh; 
 }  
 return get(dom); 
} 
//test  
cons. )); 
var domA = document.createElement("a"), _ostyle = "position:absolute;z-index:999999;width:92px;height:22px;position:absolute;display:none;";  domA.setAttribute("style", _ostyle); 
domA.style.cssText = _ostyle; 
domA.setAttribute("href", "javascript:void(0);"); >document .getElementsByTagName('body')[0].appendChild(o); 
console.log(getWH(domA));
function getCss(elem, css){
 if (window.getComputedStyle) {
  return window.getComputedStyle(elem, null)[css];
 }else if (elem.currentStyle) {
  return elem.currentStyle[css];
  return elem.currentStyle[css];
} }
}
function getWH(dom){
 var get = function(elem){
  var wh = {};
  'Width Height' .replace(/[^ ] /g, function(i){
   var a = i.toLowerCase();
   wh[a] = elem['offset' i] || elem['client' i ];
  });
  return wh;
 };
 if (getCss(dom, 'display') === 'none') {
  var nDom = dom.cloneNode( true);
  nDom.style.position = 'absolute';
  nDom.style.top = '-3000px';
  nDom.style.display = 'block';
  documTagent. '身體')[0].appendChild(nDom);
  var wh = get(nDom);
  nDom.parentNode.removeChild(nDom);
  return wh;
 }}
//test
console.log(getWH(document.getElementById('content')));
var domA = document.createElement("a"), _ostyle = "position:absolute;z-index:999999;width:92px;height:22px;position:absolute;display:none;";
domA.setAttribute("style", _ostyle);
domA.setAttribute("style", _ostyle);
domA. style.cssText = _ostyle;
domA.setAttribute("href", "javascript:void(0);");
document.getElementsByTagName('body')[0].appendChild(o);
console.log(getWH(domA));


還有其他更好的方法歡迎提出來。