javascript - JS无法读取图像宽度
问题描述
我正在为 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 - 在 JavaScript 中创建 N 维点网格
- node.js - NodeJS 客户端使用服务器流回响应
- javascript - Nuxt,过渡不适用于子路由(使用 NuxtChild 显示)
- forms - 谷歌脚本TextItem标题中的文本样式
- reactjs - MouseEnter/MouseOver 不适用于 react-testing-library。如何使用 react-testing-library 测试悬停事件
- xcode - XCODE:架构 x86_64 的未定义符号:
- android - 如何在firebase实时数据库中动态添加新节点
- stata - Stata 多项式回归 - 估计后 Wald 检验
- electron - Electronjs如何检测监视器/屏幕是否关闭
- reactjs - 未指定时如何在 React 组件中显式创建可选属性?