How to use Width property In Javascript
- It is used to change the new values to resize the width of the element.
- Get the selector of the required image using .getElementById(selector).
- Store the current width value in the variable using .clientWidth.
- Now change the width value to new using .style.width.
- It will proportionally increase and decrease the dimension of an image.
Syntax:
object.style.width = "auto|length|%|initial|inherit";
Example:
html
<!DOCTYPE html><html><head> <title> How to zoom-in and zoom-out image using JavaScript ? </title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script></head><body style="text-align:center;"> <h1 style="color:green;"> w3wiki </h1> <h3> JavaScript | Increase and Decrease image size </h3> <hr> <div class="box"> <img src="https://media.w3wiki.org/wp-content/uploads/20190912174307/qwe1.png" id="geeks" GFG="250" alt="w3wiki"> </div> <hr> <button type="button" onclick="zoomin()"> Zoom-In </button> <button type="button" onclick="zoomout()"> Zoom-Out </button> <script type="text/javascript"> function zoomin() { let GFG = document.getElementById("geeks"); let currWidth = GFG.clientWidth; GFG.style.width = (currWidth + 100) + "px"; } function zoomout() { let GFG = document.getElementById("geeks"); let currWidth = GFG.clientWidth; GFG.style.width = (currWidth - 100) + "px"; } </script></body></html> |
Output:
Output
How to zoom-in and zoom-out image using JavaScript ?
Given an image, the task is to increase and decrease the image size using JavaScript. Use the following property to increase and decrease the image.
These are the following ways:
Table of Content
- Using Width property
- Using Height property
Contact Us