How to get the width, height and position of elements with jQuery
As a web developer, you may at some point need to get the width, height, or position of an element on a webpage. This can easily be achieved using jQuery.
In this article, you will learn how to use jQuery to get the width, height, and position of elements on a webpage.
Getting the Width and Height of Elements with jQuery
The width and height of an HTML element can be obtained using the .width() and .height() methods in jQuery.
These methods return the computed pixel values (but without the units eg 500) of the width and height for the first matched element, excluding padding, borders, and margins.
Below is an example of how to get the width and height of an element whose ID attribute value is "sampleid" using jQuery:
$(function() {
var width = $('#sampleid').width();
var height = $('#sampleid').height();
console.log('Width: ' + width + ', Height: ' + height);
});
In this example, we have used the $(function() {}) to ensure that the code runs only when the DOM is fully loaded. We then used the ID "sampleid" to select the element whose dimensions we want to get. We have used the .width() method to get the element's width and .height() method to get its height. Finally, we are logging the values to the console.
We can also alternatively use the class attribute value as the selector if it's unique for that element on the page.
Below is how you can get the width and height of the entire browser window and HTML document.
// Returns width and height of the browser viewport
var width = $(window).width();
var height = $(window).height();
// Returns width and height of the HTML document
var width = $(document).width();
var height = $(document).height();
Another way of getting the width and height of elements in jQuery is by using .css( "width" ) and .css( "height" ) respectively. As opposed to the method above, using the .css() method returns a value with units (for example, 500px).
$(function() {
var width = $('#sampleid').css("width");
var height = $('#sampleid').css("height");
});
Getting the Position of Elements with jQuery
In jQuery, the position of an element can be obtained using the .offset() method. This method returns the offset (relative to the document) coordinates of the first matched element in form of an object containing two properties; the top and left positions in pixels.
Example
$(function() {
var offset = $('#sampleid').offset();
var top = offset.top;
var left = offset.left;
console.log('Top: ' + top + ', Left: ' + left);
});
Or you can have the code as below:
$(function() {
var top = $('#sampleid').offset().top;
var left = $('#sampleid').offset().left;
console.log('Top: ' + top + ', Left: ' + left);
});
In this example, we are selecting the element using its ID "sampleid" and using the .offset() method to get its position then storing the top and left positions in separate variables and logging them to the console.
Getting the Position of an Element Relative to its Parent
Sometimes, you may need to get the position of an element relative to its parent element rather than the document. In such cases, you can use the .position() method in jQuery.
This method returns the current coordinates (relative to its parent element) of the first matched element in form of an object containing two properties; the top and left positions in pixels.
Example
$(function() {
var position = $('#sampleid').position();
var top = position.top;
var left = position.left;
console.log('Top: ' + top + ', Left: ' + left);
});
Note: The number returned by the dimensions and position methods may be fractional in some cases. Therefore, your code should not assume it is an integer.
Click on the button below to get its width, height, offset position, and relative position to its parent.
That's it!
Now you know how to get the width, height, and position of HTML elements using jQuery.
