📜  如何使用 JavaScript 放大和缩小图像?

📅  最后修改于: 2022-05-13 01:56:50.207000             🧑  作者: Mango

如何使用 JavaScript 放大和缩小图像?

给定一个图像,任务是使用 JavaScript 增加和减小图像大小。使用以下属性来增加和减少图像。

使用 Width 属性:用于更改新值以调整元素的宽度。

句法:

object.style.width = "auto|length|%|initial|inherit"

方法:

  • 使用.getElementById(selector)获取所需图像的选择器。
  • 使用.clientWidth将当前宽度值存储在变量中。
  • 现在使用.style.width将宽度值更改为新值。
  • 它将按比例增加和减少图像的尺寸。

例子:



  

    
        How to zoom-in and zoom-out
        image using JavaScript ?
    
      
    

  

      
    

          GeeksForGeeks      

             

        JavaScript | Increase and         Decrease image size     

    
           
                   Geeksforgeeks     
    
                                                  

输出:

  • 在点击按钮之前:
  • 点击放大按钮后:
  • 点击缩小按钮后:

使用 Height 属性:用于更改新值以调整元素的高度。

句法:

object.style.height = "auto|length|%|initial|inherit"

方法:

  • 使用.getElementById(selector)获取所需图像的选择器。
  • 使用.clientHeight将当前高度值存储在变量中。
  • 现在使用.style.height将宽度值更改为新值。
  • 它将按比例增加和减少图像的尺寸。

例子:



  

    
        How to zoom-in and zoom-out
        image using JavaScript ?
    
      
    

  

      
    

          GeeksForGeeks      

             

        JavaScript | Increase and          Decrease image size     

    
           
        Geeksforgeeks     
    
                                      

输出:

  • 在点击按钮之前:
  • 点击放大按钮后:
  • 点击缩小按钮后: