Set element size in jQuery

Set element size in jQuery


To learn the methods of setting the element size in jQuery, read along to refer to the following article of Taimienphi.vn, in addition, readers can refer to some other articles already on Taimienphi.vn to learn more about how to get and set CSS properties in jQuery.


Set element size in jQuery

In the previous lessons, Taimienphi.vn introduced you to the stop () method in jQuery. In the next jQuery lesson, Taimienphi.vn will introduce you the methods to set element size in jQuery.

1. Set element size in jQuery

jQuery includes several methods, such as height (), innerHeight (), outerHeight (), width (), innerWidth () and outerWidth () to get and set dimensions for elements.

2. The width () and height () methods in jQuery

Methods width () and Cao() In jQuery it is used to get or set the width and height of the corresponding element. This width and height dimensions do not include padding, borders and indentation on the element.

For example: The output in the example below will return the width and height dimensions of the element div:

Designing equipment from jquery

The output will look like the following:

Designing equipment from jquery 2

Similarly we can set the width and height of the element by taking values ​​as parameters in the width () and height () methods. Values ​​can be a string (numbers and units, such as 100px, 20em, …) or some.

For example: in the example below we will set the width of the element div is 400 pixels and height is 300 pixels:

Designing equipment from jquery 3

The output will look like the following:

Designing equipment from jquery 4

Note: Use the width () or height () methods in jQuery in case if we want to use the width or height of an element in mathematical calculations because these methods return the width and height attribute values high as a value without pixel units (such as 400, 500, …). Methods like css (“width”) good css (“height”) returns a value in pixels (such as 500px, …).

3. innerWidth () and innerHeight () methods in jQuery

Methods innerWidth () and innerHeight () In jQuery it is used to get or set the width or height of an element. This width and height section includes both padding but do not include borders and indentation on the element.

For example: The following example returns the size of the element’s width and height div When clicking the button:

Designing equipment from jquery 5

The output will look like the following:

Designing equipment from jquery 6

Similarly, we can set the width and height of the element by taking the value as a parameter to the method innerWidth () and innerHeight (). These methods only change the width or height of the content container of the element to match the specified value.

For example: if the current width of the element is 300 pixels, the total left and right padding is 50 pixels compared to the new width of the element after setting the width value of the element to 400 pixles of 350 pixels, i.e. New Width = Inner Width – Horizontal Padding. Similarly we can estimate the height change when setting the height of an element.

Designing equipment from jquery 7

The output will look like the following:

Designing equipment from jquery 8

4. outerWidth () and outerHeight () methods in jQuery

Methods outerWidth () and outerHeight () In jQuery, it is used to get or set element width and height values, which include both padding and borders and do not include indentation on the element.

For example: The following example returns the width and height values ​​of the element div When we click the button:

Designing equipment from jquery 9

The output will look like the following:

Designing equipment from jquery 10

In addition, we can also take the value of the width and height of the element, these values ​​include both padding and borders as well as the alignment of the element. To do this we only need to specify parameters true for the modal outerWidth (true) and outerHeight (true).

Designing equipment in jquery 11

The output will look like the following:

Designing equipment from jquery 12

Similarly, we can set the width and height values ​​of the element by taking values ​​as parameters for the outerWidth () and outerHeight () methods. These methods only change the width or height of the content container of the element to match the specified value, like the innerWidth () and innerHeight () methods.

For example: If the current width of the element is 300 pixels and the total left padding + right padding is 50 pixels, the total width of the left border + the right border is 20 pixels compared to the new width value of the element after it is set to 400 The pixel is 330 pixels, ie New Width = Outer Width – (Horizontal Padding + Horizontal Border). Similarly we can estimate the variable height of an element when setting the outer height.

Designing equipment from jquery 13

The output will look like the following:

design of components in jquery 14

https://thuthuat.taimienphi.vn/thiet-lap-kich-thuoc-phan-tu-trong-jquery-52291n.aspx
The above lesson Taimienphi.vn has just introduced you to the methods of setting element size in jQuery. Also if there are any questions or questions that need answers as the way Insert content into HTML documents with jQuery, readers can leave your comments in the comment section below the article.

.

Related Posts

Leave a Reply

Your email address will not be published.