获取 HTML 照片的宽度 - JavaScript

在前端开发中，我们经常需要获取 HTML 页面中图片的宽度来进行布局或其他操作。本文将介绍如何使用 JavaScript 获取 HTML 图片的宽度。

方法一：使用 window.getComputedStyle() 函数

在 JavaScript 中，可以使用 window.getComputedStyle() 函数来获取到指定元素的 CSS 属性值。结合这个函数和 element 对象的 width 属性，我们就可以轻松地获取到图片的宽度：

const img = document.querySelector('img');
const imgWidth = window.getComputedStyle(img).getPropertyValue('width');
console.log(imgWidth); // 返回图片的宽度

方法二：使用 element.offsetWidth 属性

另外，我们还可以使用 element.offsetWidth 属性来获取图片宽度，这个属性返回的是元素的宽度值，包括 border 和 padding：

const img = document.querySelector('img');
const imgWidth = img.offsetWidth;
console.log(imgWidth); // 返回图片的宽度

需要注意的是，这个属性返回的值是一个整数，不包括单位。

以上就是获取 HTML 页面中图片宽度的两种方式。根据具体场景和需求选择合适的方法即可。