如何在每次点击后使图片变小？
如何在每次点击后使图片变小？
提问于 2018-07-26 22:20:58
我想出了如何在一次点击后改变图像的大小，但我试图让图像在每次点击后缩小几个像素，我找遍了这个网站和其他网站，但我没有发现任何关于如何在每次点击后改变大小的内容。我正在寻找一种严格的方式在这种格式，我正在寻找的代码，能够在HTML文件内工作。
感谢大家的意见，你的所有建议对我来说都很好。再次感谢所有评论和发送答案的人。
下面的代码就是我到目前为止所拥有的
<!doctype html>
<html>
<head>
<script>
"use script";
function resizeImage(img)
{
img.style.width = "150px";
img.style.height = "150px";
}
</script>
</head>
<body>
<figure id="image-box">
<img src="img/green.jpg" alt= "Whoops" style="width:200px;height:200px;" class="image-slide" onclick="resizeImage(this)">
</figure>
</body>
</html>回答 5
Stack Overflow用户
发布于 2018-07-26 22:39:58
只需对计算样式执行parseInt操作：
function resizeImage(img) {
var style = getComputedStyle(img,null),w=style.width,h=style.height;
w = parseInt(w)*.9; // or whatever your modifier is
h = parseInt(h)*.9; // parseInt removes the traling "px" so
img.style.width = w+"px"; // we need to append the "px"
img.style.height = h+"px";
}.image-slide { width:200px;height:200px; }<figure id="image-box">
<img src="https://placehold.it/200x200?text=Whoops" alt="Whoops"
class="image-slide" onclick="resizeImage(this)">
</figure>
Stack Overflow用户
发布于 2018-07-26 22:44:19
通过组合一些基本的JS思想，您可以轻松地做到这一点：
var scale = .9;
document.querySelector( 'img' ).addEventListener( 'click', function(){
// Get the width and height calculated in the viewport
var { width, height } = event.target.getBoundingClientRect();
// Apply by multiplying it by style,
// which will result in an update to the above
// boundingClientRect next time
event.target.style.width = width * scale + 'px';
event.target.style.height = height * scale + 'px';
});<img src="http://placehold.it/100x100" />
Stack Overflow用户
发布于 2018-07-26 22:49:19
只有在超文本标记语言中设置了内联样式时，img.style.width才能工作；如果大小来自CSS规则或图像的自然大小，它将不会返回任何内容。getComputedStyle()是一个更好的选择，但getClientBoundingRect()的优点是它返回数字，所以在计算之前，您不必费力去掉单位"px“：
function resizeImage(img) {
let rect = img.getBoundingClientRect();
img.style.width = rect.width - 10 + "px";
img.style.height = rect.height - 10 + "px";
}<figure id="image-box">
<img src="http://placehold.it/200x200" onclick="resizeImage(this)">
</figure>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51541124
复制相关文章
相似问题
腾讯云开发者
