Question

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

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

Answer 1

您可以使用以下内容：-

@link

Answer 2

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

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

document.getElementById("image").clientWidth;

对clientHeight也适用。

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

Answer 3

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

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

JS无法读取图像宽度

3 个答案: