为了使用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" 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>效果图：
推荐阅读：