一个隐藏的DOM是获取不到宽高的
如果想要获取
采用下面的方法
首先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 =
px
;
nDom
style
display =
block
;
document
getElementsByTagName(
body
)[
]
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:
;width:
px;height:
px;position:absolute;display:none;";
domA
setAttribute("style"
_ostyle);
domA
style
cssText = _ostyle;
domA
setAttribute("href"
"javascript:void(
);");
document
getElementsByTagName(
body
)[
]
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 =
px
;
nDom
style
display =
block
;
document
getElementsByTagName(
body
)[
]
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:
;width:
px;height:
px;position:absolute;display:none;";
domA
setAttribute("style"
_ostyle);
domA
style
cssText = _ostyle;
domA
setAttribute("href"
"javascript:void(
);");
document
getElementsByTagName(
body
)[
]
appendChild(o);
console
log(getWH(domA));
还有其他更好的方法欢迎提出来