首先clone一个DOM，设置position:absolute，然后设置top为一个比较大的负值，然后使其显示出来，最后获取到了DOM的宽高后，将其remove。

具体代码如下：

Js代码

复制代码 代码如下:

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));

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));

还有其他更好的方法欢迎提出来。

【javascript获取隐藏dom的宽高 具体实现】相关文章：

★ javascript搜索框效果实现方法

★ javascript常用的方法分享

★ javascript函数特点实例

★ JavaScript中的函数嵌套使用

★ javascript模拟评分控件实现方法

★ JavaScript获取两个数组交集的方法

★ javascript改变和控制显示的图片大小

★ javascript用函数实现对象的方法

★ javascript获取select值的方法分析

★ Javascript获取统一管理的提示语(message)