欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

如何使用JavaScript获取图像大小（高度和宽度）？

程序员文章站 2022-03-04 20:04:34
...

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

如何使用JavaScript获取图像大小（高度和宽度）？

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" οnclick="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>

效果图：

如何使用JavaScript获取图像大小（高度和宽度）？

推荐阅读：

php服务器

php5下载

layui框架

相关标签： JavaScript

上一篇： 聊聊Tomcat的容器

下一篇： 如何在Python中获取列表的长度和大小？

推荐阅读