码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM Element offsetWidth

❮ Previous ❮ Element Object Reference Next ❯

Example

Get the height and width of "myDIV", including padding and border:

const elmnt = document.getElementById("myDIV");
let text = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Try it Yourself »

More examples below.

Description

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:

CSS Box Model

The offsetParent

All block-level elements report offsets relative to the offset parent:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

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:

The offsetHeight Property

The offsetParent Property

The offsetTop Property

The offsetLeft Property

The clientTop Property

The clientLeft Property

The clientWidth Property

The clientHeight Property

Syntax

element.offsetWidth

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

Without a scrollbar:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Try it Yourself »

With a scrollbar:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Try it Yourself »

Browser Support

element.offsetWidth is supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes
❮ Previous ❮ Element Object Reference Next ❯