First clone a DOM, set position:absolute, then set top to a relatively large negative value, and then display it. Finally, after obtaining the width and height of the DOM, remove it.
The specific code is as follows:
Js code
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));
You are welcome to suggest other better methods.