javascript - JS无法读取图片宽度

标签 javascript properties element

我正在为 JS 学生做基本练习,其中一项要求将图像大小更改为 50%,然后单击按钮返回。

我使用以下 HTML:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
        <div>
            <img id="image" src="krogan.png" alt="krogan">
            <input type="button" value="Change size">
        </div>
    </body>
</html>

使用以下 CSS

button {
    display: block;
}

img {
    display: block;
    width: 256px;
    height: 256px;
}

当我尝试使用此 JS 代码获取当前图像宽度时

window.onload=function() {
    alert(document.getElementById('image').style.width);
}

我收到一条空消息,而不是实际设置的宽度。我做错了什么?

最佳答案

您可以使用以下内容:-

alert(document.getElementById("image").offsetWidth);

关于javascript - JS无法读取图片宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58856654/

相关文章:

javascript - 当所有图像加载完毕后,执行一段代码

c# - C# 中索引器和属性之间有什么关系?

c# - 是否有可能为 const 提供 setter/getter ?

java - 如何 : Dynamically-defined properties in Java

javascript - 如何在元素循环内获取元素的类名?

php - 如何设置自定义错误消息 zend 表单元素文件?

javascript - Javascript 中的 Linq 样式 select 语句

javascript - XHTML 1.0 严格 : Problems with form/javascript

javascript - 在 asp.net webforms 的服务器端初始化 bootstrap datetimepicker

jQuery:为什么这个元素不会在悬停时隐藏?