使用JavaScript获取图像大小（高度和宽度）_<script setup> 如何拿到图片的高度-CSDN博客

为了使用JavaScript获取图像大小（高度和宽度），可使用Element.clientHeight和Element.clientWidth属性。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。

Element.clientHeight：我们可以使用此属性访问元素的内部高度。此高度包括填充，但不包括边距和边框。

Element.clientWidth：我们可以使用此属性访问元素的内部宽度。此宽度包括填充，但不包括边距和边框。

注意：这里的元素是image，所以image.clientheight和image.clientwidth将分别用于获取图像的高度和宽度。

示例：获取图像大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用javascript获取高宽图像</title>
		<style>
			h1 {
				text-align: center;
				letter-spacing: 1px;
			}
			
			img,
			button {
				width: 400px;
				display: block;
				margin: 0 auto;
			}
			
			button {
				font-size: large;
			}
		</style>
	</head>

	<body>

		<h1>获取图像的高度和宽度</h1>
		<img src="1.jpg" alt="logo" id="image"><br />
		<button type="submit" onclick="myFunc()">获取高度和宽度</button>

		<div style="background-color: lightgray">
			<div id="height"></div>
			<div id="width"></div>
		</div>
	</body>

	<script>
		function myFunc() {
			let image = document.getElementById('image');
			let height = document.getElementById('height');
			var width = document.getElementById('width');

			height.innerHTML += '<h1>图像高度为：' +
				image.clientHeight + 'px </h1>';

			width.innerHTML += '<h1>图像宽度为：' +
				image.clientWidth + 'px </h1>';
		}
	</script>

</html>

效果图：