爲了使用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>
效果圖:
推薦閱讀: