jquery Manipulating HTML elements (dimensions)

JQuery offers several important ways to handle dimensions:

• Width ()
• Height ()
• Innerwidth ()
• Innerheight ()
• Outerwidth ()
• Outerheight ()

JQuery width () and height () methods

The width () method sets or returns the widths of elements (excluding padding, borders, or margins).

The height () method sets or returns the heights of the elements (excluding padding, borders, or margins).

The following example returns the width and height of the specified <div> element:

Instance

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

JQuery innerwidth () and Innerheight () methods

The Innerwidth () method returns the width of the element, including the padding.

The Innerheight () method returns the height of the element, including the padding.

The following example returns the Inner-width/height of the specified <div> element:

Instance

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

JQuery outerwidth () and Outerheight () methods

The Outerwidth () method returns the width of the element (including padding and borders).

The Outerheight () method returns the height of the element, including padding and borders.

The following example returns the Outer-width/height of the specified <div> element:

Instance

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

The Outerwidth (True) method returns the width of the element (including padding, borders, and margins).

The Outerheight (True) method returns the height of the element (including padding, borders, and margins).

Instance

$ ("button"). Click (function () {  var txt= "";  txt+= "Outer width (+margin):" + $ ("#div1"). Outerwidth (True) + "</br>";  txt+= "Outer height (+margin):" + $ ("#div1"). Outerheight (true);  $ ("#div1"). HTML (TXT);});

JQuery-More width () and height ()

The following example returns the width and height of the document (HTML Document) and window (browser viewport):

Instance

$ ("button"). Click (function () {  var txt= "";  txt+= "Document Width/height:" + $ (document). width ();  txt+= "x" + $ (document). Height () + "\ n";  txt+= "window Width/height:" + $ (window). width ();  txt+= "x" + $ (window). Height ();  alert (TXT);});

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

Instance

$ ("button"). Click (function () {  $ ("#div1"). Width ($). Height (500);});

jquery Manipulating HTML elements (dimensions)