当html中被display:none隐藏的部分,无法获取正确的宽度、高度,其返回的值为0或(在html及css中)明确指定的数值,并且
其返回值仅为指定值的数字部分,并不一定反映元素应有的大小,因为浏览器对display:noe的元素不做解析与渲染,无法计算出其真实的大小。
示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.1.min.js"></script>
<style type="text/css">
#width1,#width2,#width3{
margin: 10px 0;
background-color: #eee;
}
#cont div {
margin: 10px 0;
background-color: #bcd;
}
</style>
</head>
<body>
<div>
<div id="width1"></div>
<div id="width2"></div>
<div id="width3"></div>
</div>
<div>
<div id="cont">
<div id="tab-1">
<div id="x">x: dddddddd</div>
<div id="xx" style="width: 50px;">xx: dddddddddddd</div>
</div>
<div id="tab-2">
<div id="wD">wD: 12333333412</div>
<table id="wT">
<tr>
<td>wT: 12333333412</td>
</tr>
</table>
</div>
<div id="tab-3">
<div id="wwD" style="30%;">wwD: dddddddzzzzz</div>
<table id="wwT" width="30%">
<tr>
<td>wwT: dddddddzzzzz</td>
</tr>
</table>
</div>
<div id="tab-4">
<div id="wwwp">
<div id="wwwD" style="50px;">wwwD: asadaaaaad</div>
<table id="wwwT" width="50">
<tr>
<td>wwwT: asadaaaaad</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#cont').children(':not(:first)').hide();
$('#width1').text(gw());
$('#cont').children(':not(:first)').show();
$('#width2').text(gw());
$('#cont').children(':not(:first)').hide();
$('#width3').text(gw());
function gw(){
var x = $('#x').width();
var xx = $('#xx').width();
var wD = $('#wD').width();
var wwD = $('#wwD').width();
var wwwD = $('#wwwD').width();
var wT = $('#wT').width();
var wwT = $('#wwT').width();
var wwwT = $('#wwwT').width();
var wwwp = $('#wwwp').width();
var s = 'x:' + x + '\t';
s = s + 'xx:' + xx + '\t';
s = s + 'wD:' + wD + '\t';
s = s + 'wwD:' + wwD + '\t';
s = s + 'wwwD:' + wwwD + '\t';
s = s + 'wT:' + wT + '\t';
s = s + 'wwT:' + wwT + '\t';
s = s + 'wwwT:' + wwwT + '\t';
s = s + 'wwwp:' + wwwp;
return s;
}
});
</script>
</body>
</html>
效果:
因此,如果要获取宽高,应当先获取然后再隐藏,或者明确指定宽高,并保证其为实际大小。