我不知道这个简单的 javascript 代码有什么问题，我一遍又一遍地检查了这个但不起作用
[英]I dont know whats wrong with this simple javascript code, I have checked this over and over again but does not work
问题描述
Simple image expanding on mouseover and opposite on mouseout, I checked the code over and over, putting alert messages at each line to see if its working, alert message work all the way to the end but there is no effect on the image.
简单的图像在鼠标悬停时展开，在鼠标悬停时相反，我一遍又一遍地检查代码，在每一行放置警报消息以查看其是否工作，警报消息一直工作到最后，但对图像没有影响。 I am so confused, I dunno whats wrong.我很困惑，我不知道怎么了。
var side = 200; var a = 20; var t = 0; function expand() { console.log("expand is ok"); clearInterval(t); t = setInterval(grow, 20); } function grow() { console.log("Entered grow"); if (side < 300) { console.log("entered if loop"); side = side + a; document.getElementById("new").style.width = side; console.log("After statement") } else clearInterval(t); console.log("clear") }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Zoom in Zoom out</title> </head> <body> <img src="../images/women.jpg" id="new" alt="Women" onmouseover="expand()" width=2 00px> </body> </html>
1 个解决方案
解决方案1
0 2021-05-21 10:09:49
To expand on my comment:扩展我的评论：
The issue is you're trying to assign a raw number such as 200 to the width CSS property.问题是您尝试将原始数字（例如200 ）分配给宽度 CSS 属性。
If you look at CSS, you'd spell "200 pixels" as如果您查看 CSS，您会将“200 像素”拼写为
foo {
width: 200px;
}
so similarly you'll need to endow the dynamic manipulation with an unit (pixels here):所以同样你需要赋予动态操作一个单位（这里的像素）：
foo.style.width = `${width}px`;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.