How to increase the width of a div by specified pixels once it is clicked using jQuery ? Last Updated : 27 Jun, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will learn how to increase the width of a division by specified pixels once it is clicked using jQuery. We can do this task using the width() method that is used to return and set the width of an element in JQuery. So when we click on it a function is called in which first we store the current width of the div in a variable using the width() method and then increase specified pixels and set its width using width(value) method in JQuery. Syntax: // To return the width of the selected element $(selector).width() // To set the width of the selected element $(selector).width(value) Example: HTML <!DOCTYPE html> <html lang="en"> <head> <script src= "https://code.jquery.com/jquery-3.5.0.js"> </script> <style> body { color: green; font-size: 30px; } div { font-size: 40px; background-color: rgb(190, 190, 190); width: 300px; border: solid 4px red; } button { font-size: 30px; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <div onclick="fun()"> Click to Div to increase the width </div> </center> <script> // Width of the div before clicking button var w = $("div").width(); // Increment that we want to do var inc = 200; function fun() { // Increase width by 200 and set $("div").width(w + inc); } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to increase the width of a div by specified pixels once it is clicked using jQuery ? S sachinchhipa44 Follow Improve Article Tags : Web Technologies JQuery jQuery-Methods jQuery-Questions Similar Reads How to increase the size of a division when you click it using jQuery ? In this article, we will learn how to increase the size of a division when you click on it using jQuery. Approach 1: Using the height() and width() method. All the divisions on the page are first selected using a common selector and a click binding is applied to trigger the function to increase the 4 min read How to hide a div when the user clicks outside of it using jQuery? In this article, we will learn how an element can be hidden on click to its surroundings using jQuery. An element can be shown or hidden when clicked outside of it using the methods discussed below: Table of Content Using the closest() methodBy checking whether element is clicked or its surroundings 3 min read How to dynamically set the height and width of a div element using jQuery ? Set the height of a div element using jQueryThe content height of a div can be dynamically set or changed using height(), innerHeight(), and outerHeight() methods depending upon the user requirement. If the user wants to change the content height of a div dynamically, it includes changing the actual 7 min read How to get styles of a clicked division using jQuery ? In this article, we will learn how to get the styles (width, height, text color, and background color) of a clicked division using jQuery. Approach: The css() method is used to get the CSS property values of the selected element in jQuery. We use the css() method in jQuery that takes an array of nam 2 min read How to get inner width (excluding the border) of an element using jQuery ? We can get the inner width of any element using the jQuery innerWidth() method. The innerWidth() method returns the inner width of the first matched element including padding but not border. Syntax: $(selector).innerWidth() So the inner width of an element is shown in the below image. Inner width Th 1 min read Like