The JQuery Starter Tutorial (18): Manipulating the size of HTML elements __html

JQuery provides the following methods to control the size of HTML elements: width () height () innerwidth () innerheight () outerwidth () Outerheight ()

The diagram that generally affects the size of the HTML element is shown below:

JQuery width () and height () methods

Width () is used to set or get the width of the element, height () and the height of the element.

The following code gets the height and width of the <div> element.

$ ("button"). Click (function () {
   var txt= "";
   txt+= "width:" + $ ("#div1"). Width () + "</br>";
   txt+= "Height:" + $ ("#div1"). Height ();
   $ ("#div1"). HTML (TXT);
 });

The Innerwidth () and Innerheight () Methods of jquery
The innerwidth () return element includes the width of the padding, innerheight () returns the height that includes the padding.

The Outerwidth () and Outerheight () Methods of jquery
Outerwidth () returns the width that includes the padding and border, outerheight () returns the height including padding and border.

Outwidth (True) and Outheight (true) return the height and width of padding, border, and margin.

The following example sets the width and height of the specified element:

$ ("button"). Click (function () {
   $ (#div1). Width (. height);