.outerHeight()

jQuery

previous page next page

.outerHeight()

Categories: CSS | Dimensions | Manipulation > Style Properties

.outerHeight( [includeMargin ] ) Returns: Integer

Description: Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.

  • version added: 1.2.6.outerHeight( [includeMargin ] )

    • includeMargin
      Type: Boolean
      A Boolean indicating whether to include the element's margin in the calculation.

The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included.

This method is not applicable to window and document objects; for these, use .height() instead.

Example:

Get the outerHeight of a paragraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>p { margin:10px;padding:5px;border:2px solid #666; } </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p><p></p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        var p = $("p:first");
                                      
                                    

                                  

                                  

                                    

                                      $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );</script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page