Buzz
Defining Element Dimensions in jQuery
In previous tutorials, Mytour introduced the stop() method in jQuery. In this subsequent jQuery tutorial, Mytour continues by presenting various methods for defining the dimensions of elements.
1. Setting Element Dimensions in jQuery
jQuery includes various methods, such as height(), innerHeight(), outerHeight(), width(), innerWidth(), and outerWidth(), to retrieve and set dimensions for elements.
2. jQuery width() and height() Methods
The width() and height() methods in jQuery are used to retrieve or set the width and height of the corresponding element. These dimensions do not include padding, borders, and margins on the element.
Example: the output in the example below will return the width and height of the div element:
The output result will look like this:
Similarly, we can set the width and height of the element by using the value as a parameter in the width() and height() methods. The value can be a string (with numbers and units, such as 100px, 20em, ...) or a number.
Example: in the example below, we will set the width of the div element to be 400 pixels and the height to be 300 pixels:
The output result will look like this:
Note: To use the width() or height() method in jQuery, especially in cases where we need to utilize the width or height of the element in mathematical calculations, use these methods as they return values of the width and height attributes as unitless values (such as 400, 500, ...). Methods like css('width') or css('height') return values with pixel units (such as 500px, ...).
3. jQuery innerWidth() and innerHeight() Methods
The jQuery innerWidth() and innerHeight() methods are utilized to retrieve or set the width or height of the element. These dimensions include the padding but exclude the border and margin on the element.
The example below demonstrates returning the width and height of the div element upon button click:
The output result will resemble the following:
Similarly, we can set the width and height of the element by providing values as parameters for the innerWidth() and innerHeight() methods. These methods only adjust the width or height of the content box of the element to match the specified values.
Example: In the following example, we will set the width of the div element to be 400 pixels and the height to be 300 pixels:
The output result will look like this:
4. jQuery outerWidth() and outerHeight() Methods
jQuery provides outerWidth() and outerHeight() methods used to retrieve or set the width and height values of an element. These values include both padding and border but exclude the margin.
Example: The example below returns the width and height values of the div element when we click the button:
The output result will look like this:
5. jQuery outerWidth() and outerHeight() with true parameter
Additionally, we can retrieve the width and height values of an element, including both padding and border, as well as the margin. To achieve this, we just need to specify the true parameter for the outerWidth(true) and outerHeight(true) methods.
Example: If the current width of the element is 300 pixels, and the total left + right padding is 50 pixels, the total width of the left + right border is 20 pixels, compared to the new width of the element set to 400 pixels is 330 pixels. In other words, New Width = Outer Width - (Horizontal Padding + Horizontal Border). Similarly, we can estimate the change in height of the element when setting the outer height.
Example: Consider a scenario where the current width of the element is 300 pixels, and the total left + right padding is 50 pixels. The total width of the left + right border is 20 pixels compared to the new width of the element set to 400 pixels, resulting in 330 pixels. In other words, New Width = Outer Width - (Horizontal Padding + Horizontal Border). Similarly, we can estimate the change in height of the element when setting the outer height.
The output result will look like this:
In this tutorial, Mytour has introduced you to the methods for setting the size of elements in jQuery. If you have any questions or need clarification, such as how to insert content into HTML documents using jQuery, feel free to leave your comments below the article.
