为了使用 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>
效果图:
来源: http://www.css88.com/qa/javascript/10316.html