这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：
function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
但是如果这个元素是隐藏(display:none)的，尺寸又是未知自适应的，哪有上面的方法就不行了！因为display:none的元素是没有物理尺寸的！ 悲剧就这样发生了！
解决思路：
1. 获取元素（拿宽高那个）所有隐藏的祖先元素直到body元素，包括自己。
2. 获取所有隐藏元素的style的display、visibility 属性，保存下来。
3. 设置所有隐藏元素为 visibility:hidden;display:block !important;（之所以要important是避免优先级不够）。
4. 获取元素（拿宽高那个）的宽高。
5. 恢复所有隐藏元素的style的display、visibility 属性。
6. 返回元素宽高值。
代码实现：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
function
getSize(id){
var
width,
height,
elem = document.getElementById(id),
noneNodes = [],
nodeStyle = [];
getNoneNode(elem);
//获取多层display：none;的元素
setNodeStyle();
width = elem.clientWidth;
height = elem.clientHeight;
resumeNodeStyle();
return
{
width : width,
height : height
}
function
getNoneNode(node){
var
display = getStyles(node).getPropertyValue(
'display'
),
tagName = node.nodeName.toLowerCase();
if
(display !=
'none'
&& tagName !=
'body'
){
getNoneNode(node.parentNode);
}
else
{
noneNodes.push(node);
if
(tagName !=
'body'
)
getNoneNode(node.parentNode);
}
}
//这方法才能获取最终是否有display属性设置，不能style.display。
function
getStyles(elem) {
// Support: IE<=11+, Firefox<=30+ (#15098, #14150)
// IE throws on elements created in popups
// FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
var
view = elem.ownerDocument.defaultView;
if
(!view || !view.opener) {
view = window;
}
return
view.getComputedStyle(elem);
};
function
setNodeStyle(){
var
i = 0;
for
(; i < noneNodes.length; i++){
var
visibility = noneNodes[i].style.visibility,
display = noneNodes[i].style.display,
style = noneNodes[i].getAttribute(
"style"
);
//覆盖其他display样式
noneNodes[i].setAttribute(
"style"
,
"visibility:hidden;display:block !important;"
+ style);
nodeStyle[i] = {
visibility :visibility,
display : display
}
}
}
function
resumeNodeStyle(){
var
i = 0;
for
(; i < noneNodes.length; i++){
noneNodes[i].style.visibility = nodeStyle[i].visibility;
noneNodes[i].style.display = nodeStyle[i].display;
}
}
}
|
注意事项：
1. 打开显示所有隐藏祖先元素，然后获取元素的宽高值，可能在某些情况下获取值是不正确的。
PS：不过这个不用担心，真正出错时再hack方法就行。
2. 之所以要保存隐藏祖先元素display、visibility 属性，是为了后面可以设置回来，不影响其本身。
3. 另外getStyles方法是从jquery源码中摘取出来，这方法才能获取最终是否有display属性设置。
PS：不能从style.display获取。