jQuery size
May 07, 2021 jQuery
Table of contents
jQuery - Size
With jQuery, it's easy to work with elements and browser window sizes.
jQuery size method
jQuery offers several important ways to handle dimensions:
jQuery size
jQuery width() and height() methods
The width() method sets or returns the width of the element (excluding margins, borders, or margins).
The height() method sets or returns the height of the element (excluding margins, borders, or margins).
The following example returns the width and height of the specified element:
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
Try it out . . .
jQuery innerWidth() and innerHeight() methods
The innerWidth() method returns the width of the element, including the inner margin.
The innerHeight() method returns the height of the element, including the inner margin.
The following example returns the inner-width/height of the specified element:
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
Try it out . . .
jQuery outerWidth() and outerHeight() methods
The outerWidth() method returns the width of the element, including the inner margin and border.
The outerHeight() method returns the height of the element, including the inner margin and border.
The following example returns the outer-width/height of the specified element:
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Give it a try
Tip: The outerWidth (true) method returns the width of the element(including margins, borders, and margins);