Trending September 2023 # Examples Of Jquery Outerheight() Method # Suggested October 2023 # Top 9 Popular

You are reading the article Examples Of Jquery Outerheight() Method updated in September 2023 on the website Dacvumuahe.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Examples Of Jquery Outerheight() Method

Introduction to jQuery outerHeight()

jQuery dimension methods enable users to manipulate dimensions of DOM elements. jQuery outerHeight() method returns the height of an element which includes padding (top and bottom), border, and optionally margin. jQuery outerHeight() is a jQuery method that is basically used for manipulation of DOM elements dimensions such as height, width, offset, position. This method returns the outer height of the first matched element or sets the outer height of every matched Padding and Border both are included in this method and optionally margin this method is applied on an empty set of elements, it returns undefined. This method can not be used for window or document objects. For such cases, the height() method is used.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

jQuery outerHeight() Methods

Following are the methods:

1. jQuery height() Method

This method calculates the height of elements excluding border, padding, and margin.

Gets and sets the height of a given element.

Syntax:

To return the height of an element.

$(selector).height()

To set the height of an element.

$(selector).height(value)

Where value is a mandatory parameter that specifies height in pixel.

2. jQuery innerHeight() Method

This method calculates and returns the inner height of the first matched element.

It includes padding but not border or margin.

Syntax:

$(selector).innerHeight() 3. jQuery offset() Method

This method gets and sets the current coordinates of the specified elements.

It returns an object containing top and left coordinates for the element.

Syntax:

$(selector).offset()

Syntax for jQuery outerHeight():

$(selector).outerHeight(includeMargin)

Where includeMargin is an optional parameter. It is a boolean value that specifies whether the margin to be included or not. It has two values.

False: It is the default value for includeMargin, it specifies the margin not to be included in the calculation.

True: It specifies the margin to be included in the calculation.

This method can also be used to set the CSS outer height for all matched elements.

Syntax:

$(selector).outerHeight(newHeight )

If the newHeight is a number, jQuery assumes the value with a pixel.

If the newHeight is a string, any valid CSS unit can be used such as px, auto, %.

Examples of jQuery outerHeight() Method

Given below are the examples of jQueryHeight() method:

Example #1

This is a simple example showing the effect of the jQuery outerHeight() method by simply returning the outerHeight of a div.

.button { background-color: #d3ff33; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 2px 3px; cursor: pointer; } $(document).ready(function() { alert(“Outer height of div is: ” + $(“div”).outerHeight()); }); }); <div style=”height:100px;width:300px;padding:20px;margin:4px;border:10px rgb(200 , 255, 0);background-color:rgb(182, 228, 255);” ></div>

Output:

The below screen is displayed when the page is first loaded in the browser.

No activity is performed until now.

Example #2

This example shows the effect of the outerHeight method including margin.

.button { background-color: #d3ff33; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 2px 3px; cursor: pointer; } $(document).ready(function() { “Outer height of div excluding margin is: ” + $(“div”).outerHeight() + “n” + “Outer height of div including margin is: ” + $(“div”).outerHeight(true) ); }); }); <div style=”height:100px;width:300px;padding:20px;margin:4px;border:10px rgb(200 , 255, 0);background-color:rgb(182, 228, 255);” ></div>

Output:

The below screen gets displayed once the page is first time loaded in the browser.

Till now, no activity has been performed.

This alert is displaying the outer height of the div both excluding and including margin.

Example #3

Let’s take a look at an example demonstrating how to change the inner height of each div.

width: 40px; padding: 20px; height: 70px; float: left; margin: 8px; background: rgb(255, 238, 0); cursor: pointer; } .mod { background: rgb(174, 0, 255); cursor: default; } var Height_mod = 70; $(this) .outerHeight(Height_mod) .addClass(“mod”); Height_mod -= 7; });

Output:

The below screen gets displayed when the page is first loaded in the browser.

Till now, no activity has been performed.

NOTE: If the browser is zoomed in by the user, dimensions may change but browsers do not have any API to expose to address this situation. The result returned by the outerHeight() method may be fractional at times but that value should not be assumed as an Integer. This method supports both visible and hidden elements.

If the element or its parent is hidden, the value returned by the outerHeight() method can not always be accurate. To ensure that the value returned is an accurate one, the element must be visible before using the outerHeight() method.

Conclusion

This article demonstrated the effect of jQuery outerHeight() method and the way it is implemented to manipulate the DOM. This method helps in getting the current computed dimension of a DOM element with or without borders we also tried to understand the basic differences between some of the similar jQuery methods such as height(), innerHeight(), outerHeight() in terms of their effects and implementation.