文章/答案/技术大牛

发布

社区首页 >问答首页 >JS无法读取图片宽度

问JS无法读取图片宽度
EN

Stack Overflow用户

提问于 2019-11-14 20:21:09

回答 3查看 41关注 0票数 0

我正在为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);
}

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

element

javascript

properties

回答 3

Stack Overflow用户

发布于 2019-11-14 20:24:19

您可以使用以下命令：-

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

票数 1

Stack Overflow用户

发布于 2019-11-14 20:25:56

您正在访问CSS宽度，这些宽度尚未设置。

您需要的是实际宽度，可以从clientWidth属性中获取：

document.getElementById("image").clientWidth;

clientHeight也是如此。

客户端宽度或高度是浏览器向用户显示的实际大小。

票数 0

Stack Overflow用户

发布于 2019-11-14 20:29:15

我建议您使用JavaScript分配宽度，并将其从CSS文件中删除。然后，您可以在JavaScript中像这样操作它：

document.getElementById('image').css('width') == '256px';

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58856654

复制

相似问题

问JS无法读取图片宽度
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS无法读取图片宽度EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS无法读取图片宽度
EN