1、 创建一个名为 img_width 的 html 文件。

2、 在网页中添加一个 id 为 mypicture 的 标签,将其 width 属性设为 500,并设置有效的图片路径。在该图片的上方和下方分别加入若干文字内容,便于直观观察图片在页面中的实际布局与占位效果。

3、 插入一个按钮元素,绑定点击事件,用于调用自定义函数 mywidth。
4、 添加一个 元素,并为其设置 id 属性值为 showwidth。

5、 在 标签内编写 JavaScript 代码,声明一个名为 mywidth 的函数。
6、 在该函数内部,通过 document.getElementById 获取图片 DOM 对象,并读取其 width 属性以获取当前设定的显示宽度值。
7、 将获取到的宽度数值赋值给 id 为 showwidth 的 元素的 innerText 或 textContent,实现在页面中动态展示该宽度值。

8、 使用浏览器打开该 HTML 文件,点击按钮即可看到图片宽度值被成功读取并显示在指定段落中。











