How to change div height and width on button click using jQuery

Question

How to change div height and width on button click using jQuery

2

(1.9K Views)

I am learning the jQuery library. I want to know how can I change the div height and width on a button click using jQuery. I was very tired of JavaScript syntaxes and very long code. Now, I am using jQuery to create my own modules.

HTML code -

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Change div block height and width on button click using jQuery</title>
   <style type="text/css">
      .card{
         height: 200px;
         width: 200;
         border: 1px red;
      }
   </style>
</head>
<body>
<div class="card">Div block height and width</div>
<button type="button">Change Height & Width</button>
</body>
</html>

In the above code, you can see, I have a div block with initial height and width using CSS class.

Height = 200px ;

Width= 200px;

As you can check, I have created a button. How can I change the div height and width on a button click in jQuery?

css html javascript jquery js

arnabisaha (2.4K Points)

19 Oct 2022 in jquery

Answer

Share

1 Answer

Comment

Related Questions :-

Your Answer

You can post your answer after login..

vishalrana · Answer 1 · 2022-10-20T17:41:39+0000

We can easily change div height and width in HTML using a CSS stylesheet but if you want to change div block height and width on a button click using jQuery then you should use the jQuery css() method. The css() method is used to add or change CSS attributes and properties. We will change the current height and width of a div block using css() method in jQuery.

Let's understand with an example -

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Change div block height and width on button click using jQuery</title>
   <style type="text/css">
      .card{
         height: 200px;
         width: 200px;
         border: 1px solid red;
      }
   </style>
   <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
   <script type="text/javascript">
$(document).ready(function(){
    $("#btn_id").click(function(){
        $("#card").css({'height': '400px', 'width' : '400px'});
     });
});
</script>

</head>
<body>
<div class="card" id="card">Div block height and width</div>
<button type="button" id="btn_id">Change Height & Width</button>
</body>
</html>

In the above code, you can check the div lock height (200px) and width(200px) . You can change the div height and width on the button click because I used css() method and given height and width in css() method. You can change div block border color.

How to change div height and width on button click using jQuery

Related Questions :-

Live Chat