Javascript 如何在点击时使图像变大

在本文中，我们将介绍如何在点击时使图像变大。有两种常用的方法可以用来使用Javascript在点击时调整图像的大小。通过指定onclick="function_name()"，可以调用Javascript函数。

方法1: transform: scale() ：transform属性用于修改元素的形状、大小或位置。通过指定scale值，可以按比例调整元素的大小。

语法:

object.style.transform = scale(sx);

object.style.transform = scale(sx, sy);

如果未提供sy的值，则默认值为sx，这会导致统一缩放，从而保持元素的纵横比。

方法：

使用 . getElementById(selector)获得所需图像的选择器。
使用.style.transform = “scale(value)”设置需要放大图像的比例。
可以使用.style.transition添加动画效果，以使其更加吸引人。
当使用 . onclick()方法对图像标签调用该函数时，图像的大小将按照给定的比例成比例增大。
示例： 此示例显示了上述方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to make the images bigger when clicked?
    </title>
</head>
 
<body>
    <div class="container" style="text-align: center; 
                                  margin-top: 5em;">
        <!-- Image to be enlarged and onclick() function call-->
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
             onclick="enlargeImg()"
             id="img1" />
        <br /><br /><br />
        <!-- Button to reset the Image size -->
        <button onclick="resetImg()">Reset</button>
    </div>
 
    <!-- script to set display property -->
    <script>
        // Get the img object using its Id
        img = document.getElementById("img1");
        // Function to increase image size
        function enlargeImg() {
            // Set image size to 1.5 times original
            img.style.transform = "scale(1.5)";
            // Animation effect
            img.style.transition = "transform 0.25s ease";
        }
        // Function to reset image size
        function resetImg() {
            // Set image size to original
            img.style.transform = "scale(1)";
            img.style.transition = "transform 0.25s ease";
        }
    </script>
</body>
</html>

输出：

Javascript 如何在点击时使图像变大

方法2： CSS 高度和宽度

语法：

object.style.width = value(%, px, em, auto, etc);

object.style.height= value(%, px, em, auto, etc);

CSS的height和width属性指定元素的高度和宽度。使用此属性，我们可以明确地定义我们所期望的放大（或缩小）图像尺寸。

方法：

使用 .getElementById(selector) 获取所需图像的选择器。
使用 .style.width 设置放大图像应具有的宽度/高度值。
指定另一个维度的值为auto，以保持图像的纵横比。
可以使用 .style.transition 添加动画效果，以使图像更具吸引力。
当使用 .onclick() 方法在图像标签上调用该函数时，图像的尺寸将根据给定的尺寸发生变化。

示例： 此示例演示了以上所述方法的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to make the images bigger when clicked?
    </title>
</head>
 
<body>
    <div class="container" style="text-align: center;
                    margin-top: 5em;">
        <!-- Image to be enlarged and
                onclick() function call-->
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
             onclick="enlargeImg()"
             id="img1" />
        <br />
        <br />
        <br />
        <!-- Button to reset the Image size -->
        <button onclick="resetImg()">Reset
        </button>
    </div>
 
    <!-- script to set display property -->
    <script>
        img = document.getElementById("img1");
        // Function to set image dimensions
        function enlargeImg() {
            img.style.width = "60%";
            img.style.height = "auto";
            img.style.transition = "width 0.5s ease";
        }
        // Function to reset image dimensions
        function resetImg() {
            img.style.width = "40%";
            img.style.height = "auto";
            img.style.transition = "width 0.5s ease";
        }
    </script>
</body>
</html>