Question

我想出了一次单击后如何更改图像大小的方法，但是我试图使图像在每次单击后缩小几像素，我在整个本网站和其他网站上看了看，但没有发现任何可参考的内容每次点击后如何更改大小。我正在寻找一种严格采用这种格式的方法，我正在寻找能够在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>

Answer 1

只需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>

Answer 2

通过结合一些基本的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" />

Answer 3

img.style.width仅在HTML中将样式设置为内联时才有效；如果尺寸来自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>

Answer 4

此代码可能并不完美，但是可以完成

function resizeImage(img) {
      img.style.width = parseInt(img.style.width.replace('px','')) - 10 + 'px';
      img.style.height = parseInt(img.style.height.replace('px','')) - 10 + 'px';
    }

<figure id="image-box">

  <img src="http://www.tascsoftware.co.uk/wiki/PARS_Connect/images/0/0e/Green.jpg" alt="Whoops" style="width:200px;height:200px;" class="image-slide" onclick="resizeImage(this)">
  
</figure>

Answer 5

尝试一下：

<!doctype html>
            <html>
                <head> 
                    <script>
                    "use script";
                    function resizeImage(img) 
                    {
										
	               var height = parseFloat(img.style.width);;
			var width = parseFloat(img.style.width);;

                      img.style.width =  (height - 10) + "px";
                      img.style.height = (width - 10) + "px";
                    }

                    </script>

                </head>
                <body>   
                    <figure id="image-box">

                      <img src="http://placehold.it/100x100" alt= "Whoops" style="width:200px;height:200px;" class="image-slide" onclick="resizeImage(this)">

                    </figure>
                </body>
            </html>

每次单击后如何缩小图像？

5 个答案: