Getting and setting the width and height of div by jQuery

Keywords: Attribute JQuery

There are two ways to get and set the width and height of a div: using the dimension function or using the css method


Get width and height

1. Dimension function: height() gets height, width() gets width

2. Obtain div width and height by CSS: obtain height by css("height") and width by css("width")


Difference: the value obtained by dimension function is integer, while the value obtained by css is string with px


  1. $(".div1").click(function() {  
  2.     //1. The width() height() method is used to get the width and height. The integer is returned  
  3.     var divw = $(this).width();  
  4.     var divh = $(this).height();  
  5.     //2. Use css to get the string with px  
  6.     var divw = $(this).css("width");  
  7.     var divh = $(this).css("height");  
  8.     alert("div wide:" + divw + ";div high:" + divh);  
  9. });  

Two pop-up values are:

Div width: 100;div height: 100

Div width: 100px;div height: 100px


Set width and height

The first method: set height(10) width(10) using the dimension function

The second method: use css function to set

css({"width":"10px","height":"10px"}) / / when using css to set multiple attributes, separate attributes in braces with commas

css("width","10px") / / when you use css to set a single property, separate the property name and property value with commas (you don't need to put them in braces)


The third method: use the animate setting (the specific usage is in the next article)

. animate({width:"10px",height:"10px"},4000); / / the difference between using animate and css parameters is that the attribute name of the animate parameter does not need to be enclosed in quotation marks


  1. $("#update").click(function() {  
  2.     var divw = $("#w").val();  
  3.     var divh = $("#h").val();  
  4.       
  5.     //1. Use the width() height() method to set the div width and height  
  6.     $(".div1").width(divw).height(divh);  
  7.       
  8.     //2. Use css to set width and height  
  9.     $(".div1").css({"width":divw+"px","height":divh+"px"});  
  10.   
  11.     //3. Write code using function chain  
  12.     //Note: when using css to set a single style, the parameter is css("width",divw+"px") comma separated  
  13.     $(".div1").css("width",divw+"px").css("height",divh+"px");  
  14.       
  15.     //4. Function chain using different functions  
  16.     $(".div1").css("width",divw+"px").height(divh);  
  17.   
  18.     //5. Animation () changes width and height  
  19.     $(".div1").animate({width:divw+"px",height:divh+"px"},4000);  
  20.       
  21.     //6.animate() Animation: first change the width, then the height  
  22.     $(".div1").animate({width:divw+"px"},4000).animate({height:divh+"px"},4000);  
  23. });  

html part code:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <title></title>  
  7.         <style type="text/css">  
  8.             .div1 {  
  9.                 background-color: darkorange;  
  10.                 width: 200px;  
  11.                 height: 200px;  
  12.                 cursor: pointer;  
  13.             }  
  14.         </style>  
  15.         <script src="js/jquery-1.12.3.min.js"></script>  
  16.     </head>  
  17.   
  18.     <body>  
  19.         <p>wide:<input type="text" id="w" /></p>  
  20.         <p>high:<input type="text" id="h" /></p>  
  21.         <input type="button" value="Modify dimensions" id="update" />  
  22.   
  23.         <div class="div1"></div>  
  24.     </body>  
  25. </html>  

Posted by skatermike21988 on Tue, 05 May 2020 10:56:29 -0700