jquery each实现均衡元素的高度

daxiang12092205

于 2014-04-20 10:25:26 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery each 元素高度

本文链接：https://blog.youkuaiyun.com/daxiang12092205/article/details/24175985

前端专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现动态网页布局调整的方法，通过监听按钮点击事件，获取并应用最大的div高度作为所有div元素的统一高度，以达到布局优化和视觉效果提升的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html> 
<head> 
<title></title> 
<style type='text/css'>
	div {
		width: 400px;
	}
	#div1 {
		height: 10px;
		background-color: #ff0;
	}
	#div2 {
		height: 20px;
		background-color: #f0f;
	}
	#div3 {
		height: 30px;
		background-color: #0ff;
	}
</style>
</head> 
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<input type="button" id="test" value="test"></input>
</body> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
<script type='text/javascript'> 
$('#test').click(function(){
	var maxHeight = 50;
	$('div').each(function(){
		if($(this).height() > maxHeight){
			maxHeight = $(this).height();
		}
	});
	$('div').height(maxHeight);
});
</script> 
</html>

注：chrome ie8下运行均正常。