javascript獲取隱藏dom的寬高
來源：程序員人生 發(fā)布時間：2014-01-02 07:16:51 閱讀次數(shù)：2718次
一個隱藏的DOM是獲取不到寬高的，如果想要獲取，采用下面的方法：
首先clone一個DOM，設置position:absolute，然后設置top為一個比較大的負值，然后使其顯示出來，最后獲取到了DOM的寬高后，將其remove。
具體代碼如下：
function getCss(elem, css){
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[css];
}else if (elem.currentStyle) {
return elem.currentStyle[css];
}else {
return elem.style[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';
document.getElementsByTagName('body')[0].appendChild(nDom);
var wh = get(nDom);
nDom.parentNode.removeChild(nDom);
return wh;
}
return get(dom);
}
//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.style.cssText = _ostyle;
domA.setAttribute("href", "javascript:void(0);");
document.getElementsByTagName('body')[0].appendChild(o);
console.log(getWH(domA));
還有其他更好的方法歡迎提出來。
生活不易，碼農辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
