html 获取图片的高度,如何获取一个动态添加的img的高度?
时间: 2024-03-01 22:50:48 浏览: 20
可以使用 JavaScript 中的 `clientHeight` 属性来获取动态添加的图片的高度,代码如下:
```javascript
var img = new Image();
img.onload = function() {
var height = img.clientHeight;
console.log(height);
};
img.src = 'image.jpg';
document.body.appendChild(img);
```
在这个例子中,我们首先创建一个新的 `Image` 对象,然后设置 `onload` 事件处理函数来等待图片加载完成。一旦图片加载完成,就会调用该函数并获取图片高度。最后,我们使用 `console.log()` 将高度输出到控制台中。
请注意,在设置 `src` 属性之前注册 `onload` 事件处理函数非常重要,因为如果图片已经被缓存,那么 `onload` 事件可能不会被触发。
如果您需要获取多个图片的高度,可以使用 `Promise` 和 `Promise.all()`,代码如下:
```javascript
function getImageHeight(src) {
return new Promise(function(resolve, reject) {
var img = new Image();
img.onload = function() {
var height = img.clientHeight;
resolve(height);
};
img.onerror = reject;
img.src = src;
});
}
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
Promise.all(images.map(getImageHeight)).then(function(heights) {
console.log(heights);
});
```
在这个例子中,我们定义了一个 `getImageHeight()` 函数来获取单个图片的高度,并返回一个 `Promise` 对象。然后,我们定义了多个图片的 URL,使用 `Promise.all()` 和 `Array.map()` 来并行获取多个图片的高度。一旦所有图片的高度都被获取,就会调用 `.then()` 方法并将高度数组作为参数传递。最后,我们使用 `console.log()` 将高度输出到控制台中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)