How to javascript get element width? by examples

How to javascript get element width? by examples

Using HTML DOM offsetWidth Property

Example 1: get the width and height of <div>

To get the width and height of <div>, (including padding and border):

var element = document.getElementById("divElement");
var textOut= "Height : " + element.offsetHeight + "px<br>";
textOut += "Width : " + element.offsetWidth + "px";

The HTMLElement.offsetWidth property read-only.
used to returns the layout width of an element.
return width as an integer.

offsetWidth returns value pixels of the selected CSS (element) width.
but including the borders, padding, and vertical scrollbars.

If the element is hidden, then 0 is returned.

Why specifying the word “viewable”?
This property will only return the visual display.

If you want to add scroll bars to an item. use the CSS overflow feature.

To get height and width including padding only.use clientHeight or clientWidth properties

Example 2 the difference between clientHeight/clientWidth and offsetHeight/offsetWidth :

javascript get element width using clientHeight/clientWidth and offsetHeight/offsetWidth

var element = document.getElementById("divElement");
var textOut = "";
textOut += "Height with padding: " + element.clientHeight + "px" + "<br>";
textOut += "Width with padding: " + element.clientWidth + "px + "<br>";
textOut += "Height with padding + border: " + element.offsetHeight + "px + "<br>";
textOut += "Width with padding + border: " + element.offsetWidth + "px";

Javascript get width of an element with Style width Property

Example 3 Set the width of a <button> element :

Set the width of a <button> element by style width:

document.getElementById("yourBtn").style.width = "200px";

you can use this example for block-level elements or on elements with absolute or fixed position.
use the width property to set or return the width of an element.
The overflowing content can be manipulated with the overflow property.
Use the height property to set or return the height of an element.

Example 4 set the width of a <div> element :

Change the width of a <div> element:

document.getElementById("yourDIV").style.width = "300px";

Example 5 set the height and width of an <img> element:

Change the height and width of an <img> element:

document.getElementById("yourImg").style.height = "600px";
document.getElementById("yourImg").style.width = "600px";

Example 6 get the width of an <img> element:

Return the width of an <img> element:

var widthImg = document.getElementById("yourImg").style.width;

How to javascript get element width? using jQuery

Getting the width and height of an element

Get the currently calculated dimension of an item, with or without borders and margins.
Use the following methods in example to obtain the width and height of each of these boxes:

//document.querySelector(CSS selectors)
var box = document.querySelector('.classDiv');

// width and height in pixels
// including padding + border

// jQuery outerWidth()
var width = box.offsetWidth;
// jQuery outerHeight()
var height = box.offsetHeight;


// width and height in pixels
// including padding - border
// Corresponds to jQuery innerWidth()
var width = box.clientWidth;
// Corresponds to  innerHeight()
var height = box.clientHeight;

calculate the margin of an element using the style of the element:

var style =  null;
var element = document.querySelector('.classDiv');
if(window.getComputedStyle){
style = getComputedStyle(element, null);
}else{
style = element.currentStyle;
}
var marginLeftEl = parseInt(style.marginLeft) || 0;
var marginRightEl = parseInt(style.marginRight) || 0;
var marginTopEl = parseInt(style.marginTop) || 0;
var marginBottomEl = parseInt(style.marginBottom) || 0;

Return the width of the border of a <div> element:

alert(document.getElementById("myDiv").style.borderWidth);

Some methods do not work on the window or document object.
So use this instead in examples :

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

• .width()

Description: Get the current computed width for the first element in the set of matched elements.

The difference between .css( "width" ) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() the method is recommended when an element’s width needs to be used in a mathematical calculation.

Example 6 return width of browser viewport and HTML document :

// Returns width of browser viewport
$( window ).width();
 
// Returns width of HTML document
$( document ).width();

for more examples read https://api.jquery.com/width/

and for more tutorial read https://codingfortech.com/category/tutorials/