dispaly:none隐藏的部分无法获取宽度高度

tom&jerry

浏览: 66156 次
性别:
来自: 上海

最近访客更多访客>>

maoweiwer

qingmuxiang

kylix1

zyf87843513

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

当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>

效果:

因此，如果要获取宽高，应当先获取然后再隐藏，或者明确指定宽高，并保证其为实际大小。