如何使用JavaScript获取图像大小(高度和宽度)?

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

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

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

注意:这里的元素是image,所以image.clientheightimage.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>

效果图:

1561959410406371.gif

以上就是如何使用JavaScript获取图像大小(高度和宽度)?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏