如何使用 jQuery 动态设置 div 元素的高度和宽度？

使用 jQuery 设置 div 元素的高度

div 的内容高度可以根据用户要求使用 height()、innerHeight() 和 outerHeight() 方法动态设置或更改。如果用户想动态改变一个div的内容高度，它包括改变实际高度、实际高度带padding、实际高度带padding和边框，那么用户可以使用以下任何一种方法来动态设置高度元素的内容。

• 使用 height() 方法
• 使用 innerHeight() 方法
• 使用 externalHeight() 方法

示例 1：使用 height() 方法的 div 内容高度将更改元素内容的高度，不包括元素的 padding、border 和 margin。

HTML

 
 
    
 
    
        How to dynamically set the height of 
        a div element using jQuery?
    
    
    
    
     
        #div1 { 
            height: 50px; 
            width: 300px; 
            border: 2px solid black;  
        } 
    
        h1 { 
            color: green; 
        } 
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
     
 
    
 
     
        GeeksforGeeks 
        Dynamically set the height of
        a div element using jQuery 
    
         
            Dynamically set content height of
            a div on GeeksforGeek.
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
         
         
        
            
            
                Set Height
            
        
    
        
        
     
    
     
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-height: "+ 
                           $("#div1").height(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newHeight = $(".geeks1").val();
                $(".box").height(newHeight);
                  
                demo = "New-height: "+ 
                           $("#div1").height(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
     
 
    

输出：

示例 2：使用 innerHeight() 方法设置 div 的内容高度将更改元素内容的高度，包括元素的内边距。

HTML

 
 
    
 
    
        How to dynamically set the height 
        of a div element using jQuery?
    
  
    
    
    
     
        #div1 { 
            height: 50px; 
            width: 300px; 
            border: 2px solid black;
            padding : 10px;
        } 
    
        h1 { 
            color: green; 
        } 
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
     
 
    
 
     
        GeeksforGeeks 
        Dynamically set the height of
        a div element using jQuery 
    
         
            Dynamically set content height
            of a div on GeeksforGeek.
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
         
         
        
            
            
                Set Height
            
        
    
        
        
     
    
     
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-height(+Padding) : "
                           + $("#div1").innerHeight(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newHeight = $(".geeks1").val();
                $(".box").innerHeight(newHeight);
                  
                demo = "New-height(+Padding) : "+ 
                           $("#div1").innerHeight(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
     
 
    

输出：

示例 3：使用 outerHeight() 方法更改 div 的内容高度将更改元素内容的高度，包括元素的内边距和边框。

HTML

 
 
    
 
    
        How to dynamically set the height 
        of a div element using jQuery?
    
  
    
    
    
     
        #div1 { 
            height: 50px; 
            width: 300px; 
            border: 2px solid black;
            padding : 10px;
        } 
    
        h1 { 
            color: green; 
        } 
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
     
 
    
 
     
        GeeksforGeeks 
        Dynamically set the height of
        a div element using jQuery 
    
         
            Dynamically set content height 
            of a div  on GeeksforGeek.
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
         
         
        
            
            
                Set Height
            
        
    
        
        
     
    
     
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-height(border+Padding) : " 
                           + $("#div1").outerHeight(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newHeight = $(".geeks1").val();
                $(".box").outerHeight(newHeight);
                  
                demo = "New-height(border+Padding) : "
                           + $("#div1").outerHeight(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
     
 
    

输出：

使用 jQuery 设置 div 元素的宽度

div 的内容宽度可以根据用户要求使用 width()、innerWidth() 和 outerWidth() 方法动态设置或更改。如果用户想动态改变一个div的内容宽度，它包括改变实际宽度、实际宽度带padding、实际宽度带padding和边框，那么用户可以使用以下任何一种方法来动态设置宽度元素的内容。

• 使用 width() 方法
• 使用 innerWidth() 方法
• 使用 externalWidth() 方法

示例 1：使用 width() 方法的 div 内容宽度将更改元素内容的宽度，不包括元素的内边距、边框和边距。

HTML

 
 
    
 
    
        How to dynamically set the width 
        of a div element using jQuery?
    
  
    
    
    
     
        #div1 { 
            height: 100px; 
            width: 200px; 
            border: 2px solid black;
            padding : 10px;
        } 
    
        h1 { 
            color: green; 
        } 
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
     
 
    
 
     
        GeeksforGeeks 
        Dynamically set the width of
        a div element using jQuery 
    
         
            Dynamically set content width of a div  
            on GeeksforGeek.
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
         
         
        
            
            
                Set Width
            
        
    
        
        
     
    
     
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-width : "+ 
                           $("#div1").width(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newWidth = $(".geeks1").val();
                $(".box").width(newWidth);
                  
                demo = "New-width : "+ 
                           $("#div1").width(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
     
 
    

输出：

示例 2：使用 innerWidth() 方法更改 div 的内容宽度将更改元素内容的宽度，包括元素的填充。

HTML

 
 
    
 
    
        How to dynamically set the width 
        of a div element using jQuery?
    
  
    
    
    
     
        #div1 { 
            height: 100px; 
            width: 200px; 
            border: 2px solid black;
            padding : 10px;
        } 
    
        h1 { 
            color: green; 
        } 
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
     
 
    
 
     
        GeeksforGeeks 
        Dynamically set the width of
        a div element using jQuery 
    
         
            Dynamically set content width of a div  
            on GeeksforGeek.
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
         
         
        
            
            
                Set Width
            
        
    
        
        
     
    
     
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-width(+Padding) : "+ 
                           $("#div1").innerWidth(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newWidth = $(".geeks1").val();
                $(".box").innerWidth(newWidth);
                  
                demo = "New-width(+Padding) : "+ 
                           $("#div1").innerWidth(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
     
 
    

输出：

示例 3：使用 outerWidth() 方法更改 div 的内容宽度将更改元素内容的宽度，包括元素的内边距和边框。

HTML

 
 
    
 
    
        How to dynamically set the width 
        of a div element using jQuery?
    
  
    
    
    
     
        #div1 { 
            height: 100px; 
            width: 200px; 
            border: 2px solid black;
            padding : 10px;
        } 
    
        h1 { 
            color: green; 
        } 
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
     
 
    
 
     
        GeeksforGeeks 
        Dynamically set the width of
        a div element using jQuery 
    
         
            Dynamically set content width of a div  
            on GeeksforGeek.
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
         
         
        
            
            
                Set Width
            
        
    
        
        
     
    
     
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-width(border+Padding) : "+ 
                           $("#div1").outerWidth(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newWidth = $(".geeks1").val();
                $(".box").outerWidth(newWidth);
                  
                demo = "New-width(border+Padding) : "+ 
                           $("#div1").outerWidth(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
     
 
    

输出：