js、jq根据class获取多个div最大或最小宽度

六月初六月初 JavaScipt 2023-06-17 20:41:09

javascript的使用在前端开发中是不可缺少一部分，对于js的使用也引物各种各样的需求而有所不同。

如：多个相同class的div，取出这所有div里面宽度最大和最小的div值。

通过js又可以如何实现该功能呢，本文介绍基于原生js或jq来实现从多个div中去除最大或最小宽度。

javascript写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="test" style="width: 200px;">宽度1</div>
		<div class="test" style="width: 120px;">宽度2</div>
		<div class="test" style="width: 100px;">宽度3</div>
		<script>
			window.onload = function(){
				var w_max = 100;
				var w_min = 100;
				var widthBox = document.getElementsByClassName('test');
				for (var i = 0; i < widthBox.length; i++) {
					w_max = w_max < widthBox[i].offsetWidth ? widthBox[i].offsetWidth : w_max;
					w_min = w_min > widthBox[i].offsetWidth ? widthBox[i].offsetWidth : w_min;
				}
				console.log("最大宽度：",w_max)
				console.log("最小宽度：",w_min)
			}
		</script>
	</body>
</html>

原生写法中的关键参数解析：

    offsetWidth：返回一个元素的布局宽度。

    offsetHeight：返回一个元素的布局高度。

jq写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
	</head>
	<body>
		<div class="test" style="width: 200px;">宽度1</div>
		<div class="test" style="width: 120px;">宽度2</div>
		<div class="test" style="width: 100px;">宽度3</div>
		<script>
			$(function(){
				var w_max = 100;
				var w_min = 100;
				$(".test").each(function(e){
					var  w = $(this).width();
					w_max = w_max < w ? w : w_max;
					w_min = w_min > w ? w : w_min;
				})
				console.log("最大宽度：",w_max)
				console.log("最小宽度：",w_min)
			})
		</script>
	</body>
</html>

实现原理：

    获取多个相同class的div宽度，进行循环对比。将最大或最小宽度赋值给定义的属性。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！