Get width div html

HTML DOM Element offsetWidth

The offsetWidth property returns the viewable width of an element (in pixels) including padding, border and scrollbar, but not the margin. The offsetWidth property is read-only.

Tutorial:

The offsetParent

The offset parent is the nearest ancestor that has a position other than static.

If no offset parent exists, the offset is relative to the document body.

See Also:

Syntax

Return Value

Type	Description
Number	The viewable width of an element (in pixels) including padding, border and scrollbar.

The Difference between
clientHeight/clientWidth and offsetHeight/offsetWidth

const elmnt = document.getElementById(«myDIV»);
let text = «»;
text += «Height with padding: » + elmnt.clientHeight + «px
«;
text += «Height with padding and border: » + elmnt.offsetHeight + «px
«;
text += «Width with padding: » + elmnt.clientWidth + «px
«;
text += «Width with padding and border: » + elmnt.offsetWidth + «px»;

const elmnt = document.getElementById(«myDIV»);
let text = «»;
text += «Height with padding: » + elmnt.clientHeight + «px
«;
text += «Height with padding, border and scrollbar: » + elmnt.offsetHeight + «px
«;
text += «Width with padding: » + elmnt.clientWidth + «px
«;
text += «Width with padding, border and scrollbar: » + elmnt.offsetWidth + «px»;

Browser Support

element.offsetWidth is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Источник

Determining the dimensions of elements

There are several properties you can look at in order to determine the width and height of elements, and it can be tricky to determine which is the right one for your needs. This article is designed to help you make that decision. Note that all these properties are read-only. If you want to set the width and height of an element, use width and height or the overriding min-width and max-width , and min-height and max-height properties.

How much room does it use up?

If you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the HTMLElement.offsetWidth and HTMLElement.offsetHeight properties. Most of the time these are the same as width and height of Element.getBoundingClientRect() , when there aren’t any transforms applied to the element. In case of transforms, the offsetWidth and offsetHeight returns the element’s layout width and height, while getBoundingClientRect() returns the rendering width and height. As an example, if the element has width: 100px; and transform: scale(0.5); the getBoundingClientRect() will return 50 as the width, while offsetWidth will return 100.

What’s the size of the displayed content?

If you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the Element.clientWidth and Element.clientHeight properties:

How big is the content?

If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the Element.scrollWidth and Element.scrollHeight properties. These return the width and height of the entire content of an element, even if only part of it is presently visible due to the use of scroll bars.

For example, if a 600×400 pixel element is being displayed inside a 300×300 pixel scrollbox, scrollWidth will return 600 while scrollHeight will return 400.

See also

Found a content problem with this page?

This page was last modified on Feb 19, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Getting the Width and Height of an Element

Summary: in this tutorial, you will learn how to get the current computed dimension of an element, including width and height.

The following picture displays the CSS box model that includes a block element with content, padding, border, and margin:

To get the element’s width and height that include the padding and border, you use the offsetWidth and offsetHeight properties of the element:

let box = document.querySelector('.box'); let width = box.offsetWidth; let height = box.offsetHeight;Code language: JavaScript (javascript)

The following picture illustrates the offsetWidth and offsetHeight of an element:

See the following example:

html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Getting the Width and Height of an Element title> head> body> div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px"> div> script> let box = document.querySelector('.box'); let width = box.offsetWidth; let height = box.offsetHeight; console.log(< width, height >); script> body> html>Code language: HTML, XML (xml)

width: 122, height: 172>Code language: CSS (css)

• The width is 100px
• The border is 1px on each side, so 2px for both
• The padding 10px on each side, so 20px for both

Therefore, the total width 12px. Similarly, the height is 172px.

To get the width & height of an element as floating-point after CSS transformation, you use the getBoundingClientRect() method of the DOM element. For example:

html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Getting the Width and Height of an Element title> head> body> div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px"> div> script> let box = document.querySelector('.box'); let width = box.offsetWidth; let height = box.offsetHeight; console.log(< width, height >); const domRect = box.getBoundingClientRect(); console.log(domRect); script> body> html>Code language: HTML, XML (xml)

width: 122, height: 172> DOMRect x: 7.997685432434082, y: 7.997685432434082, width: 121.95602416992188, height: 171.95602416992188, top: 7.997685432434082, …>Code language: CSS (css)

clientWidth & clientHeight

To get the element’s width and height that include padding but without the border, you use the clientWidth and clientHeight properties:

let box = document.querySelector('.box'); let width = box.clientWidth; let height = box.clientHeight;Code language: JavaScript (javascript)

The following picture illustrates the clientWidth and clientHeight of an element:

To get the margin of an element, you use the getComputedStyle() method:

let box = document.querySelector('.box'); let style = getComputedStyle(box); let marginLeft = parseInt(style.marginLeft); let marginRight = parseInt(style.marginRight); let marginTop = parseInt(style.marginTop); let marginBottom = parseInt(style.marginBottom);Code language: JavaScript (javascript)

To get the border width of an element, you use the property of the style object returned by the getComputedStyle() method:

let box = document.querySelector('.box'); let style = getComputedStyle(box); let borderTopWidth = parseInt(style.borderTopWidth) || 0; let borderLeftWidth = parseInt(style.borderLeftWidth) || 0; let borderBottomWidth = parseInt(style.borderBottomWidth) || 0; let borderRightWidth = parseInt(style.borderRightWidth) || 0; Code language: JavaScript (javascript)

To get the height and width of the window, you use the following code:

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;Code language: JavaScript (javascript)

Summary

Источник

HTMLElement: offsetWidth property

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

Typically, offsetWidth is a measurement in pixels of the element’s CSS width, including any borders, padding, and vertical scrollbars (if rendered). It does not include the width of pseudo-elements such as ::before or ::after .

If the element is hidden (for example, by setting style.display on the element or one of its ancestors to «none» ), then 0 is returned.

Value

An integer corresponding to the offsetWidth pixel value of the element. The offsetWidth property is a read-only.

Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect() .

Examples

Specifications

Notes

offsetWidth is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element’s physical/graphical dimensions, or an element’s border-box width.

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник