【杂谈】JS怎样猎取图片当前宽高

2019-11-18杂谈搜奇网34°c

A⁺ A^-

JS猎取图片当前的宽高，我们能够运用JavaScript clientWidth和clientHeight属性来完成猎取。clientWidth、clientHeight属性示意猎取图象的当前宽度和高度。

引荐参考：《JavaScript教程》

下面我们就连系细致的代码示例，给人人引见JS猎取图片当前宽高的要领。

代码实例以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js猎取当前图片宽高的示例</title>
    <script type="text/javascript">
 function imgSize(){
            var myImg = document.querySelector("#sky");
            var currWidth = myImg.clientWidth;
            var currHeight = myImg.clientHeight;
 alert("当前 width=" + currWidth + ", " + "当前 height=" + currHeight);
 }
    </script>
</head>
<body>
<img src="./1/png" id="sky" style=" width:250px;">
<p><button type="button" onclick="imgSize();">猎取</button></p>
</body>
</html>

当我们点击猎取按钮时，就会挪用上述定义的imgSize()要领，个中querySelector() 要领能够猎取文档中 id="sky" 的元素，也就是猎取的img图片。然后经由过程.clientWidth 和clientHeight属性来猎取元素的当前宽度和高度（单元:像素）。

这里的img图片，我们给它添加了一个width属性为250px，高度为自适应。

终究结果以下图所示：