Element.clientWidth

The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

When clientWidth is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's width (excluding any scrollbar) is returned.  This is a special case of clientWidth.

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

Syntax

var intElemClientWidth = element.clientWidth;

intElemClientWidth is an integer corresponding to the clientWidth of element in pixels. The clientWidth property is read–only.

Example

Image:Dimensions-client.png

Specification

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'clientWidth' in that specification.		 Working Draft

Notes

clientWidth was first introduced in the MS IE DHTML object model.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
clientWidthChrome Full support 43Edge Full support 12Firefox Full support YesIE Full support 6Opera Full support YesSafari Full support 6WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0

Legend

Full support  
Full support

See also

Tópicos relacionados
  1. Document Object Model
  2. Element
  3. Properties
    1. accessKey
    2. attributes
    3. childElementCount
    4. children
    5. classList
    6. className
    7. clientHeight
    8. clientLeft
    9. clientTop
    10. clientWidth
    11. currentStyle
    12. firstElementChild
    13. id
    14. innerHTML
    15. lastElementChild
    16. localName
    17. name
    18. namespaceURI
    19. nextElementSibling
    20. onfullscreenchange
    21. onfullscreenerror
    22. openOrClosedShadowRoot
    23. outerHTML
    24. part
    25. prefix
    26. previousElementSibling
    27. runtimeStyle
    28. scrollHeight
    29. scrollLeft
    30. scrollLeftMax
    31. scrollTop
    32. scrollTopMax
    33. scrollWidth
    34. shadowRoot
    35. slot
    36. tabStop
    37. tagName
  4. Methods
    1. after()
    2. animate()
    3. append()
    4. attachShadow()
    5. before()
    6. closest()
    7. computedStyleMap()
    8. createShadowRoot()
    9. getAnimations()
    10. getAttribute()
    11. getAttributeNames()
    12. getAttributeNode()
    13. getAttributeNodeNS()
    14. getAttributeNS()
    15. getBoundingClientRect()
    16. getClientRects()
    17. getElementsByClassName()
    18. getElementsByTagName()
    19. getElementsByTagNameNS()
    20. hasAttribute()
    21. hasAttributeNS()
    22. hasAttributes()
    23. hasPointerCapture()
    24. insertAdjacentElement()
    25. insertAdjacentHTML()
    26. insertAdjacentText()
    27. matches()
    28. msZoomTo()
    29. prepend()
    30. querySelector()
    31. querySelector()
    32. querySelectorAll()
    33. querySelectorAll()
    34. releasePointerCapture()
    35. remove()
    36. removeAttribute()
    37. removeAttributeNode()
    38. removeAttributeNS()
    39. replaceWith()
    40. requestFullscreen()
    41. requestPointerLock()
    42. scroll()
    43. scrollBy()
    44. scrollIntoView()
    45. scrollIntoViewIfNeeded()
    46. scrollTo()
    47. setAttribute()
    48. setAttributeNode()
    49. setAttributeNodeNS()
    50. setAttributeNS()
    51. setCapture()
    52. setPointerCapture()
    53. toggleAttribute()
  5. Events
    1. afterscriptexecute
    2. auxclick
    3. blur
    4. click
    5. compositionend
    6. compositionstart
    7. compositionupdate
    8. contextmenu
    9. copy
    10. cut
    11. dblclick
    12. DOMMouseScroll
    13. error
    14. focus
    15. focusin
    16. focusout
    17. gesturechange
    18. gestureend
    19. gesturestart
    20. keydown
    21. mousedown
    22. mouseenter
    23. mousemove
    24. mouseout
    25. mouseover
    26. mouseup
    27. mousewheel
    28. MozMousePixelScroll
    29. msContentZoom
    30. MSGestureChange
    31. MSGestureEnd
    32. MSGestureHold
    33. MSGestureStart
    34. MSGestureTap
    35. MSInertiaStart
    36. MSManipulationStateChanged
    37. overflow
    38. paste
    39. select
    40. show
    41. touchcancel
    42. touchstart
    43. underflow
    44. webkitmouseforcechanged
    45. webkitmouseforcedown
    46. webkitmouseforceup
    47. webkitmouseforcewillbegin
    48. wheel
  6. Inheritance:
    1. Node
    2. EventTarget
  7. Related pages for DOM
    1. AbortController
    2. AbortSignal
    3. AbstractRange
    4. Attr
    5. ByteString
    6. CDATASection
    7. CSSPrimitiveValue
    8. CSSValue
    9. CSSValueList
    10. CharacterData
    11. ChildNode
    12. Comment
    13. CustomEvent
    14. DOMConfiguration
    15. DOMError
    16. DOMErrorHandler
    17. DOMException
    18. DOMImplementation
    19. DOMImplementationList
    20. DOMImplementationRegistry
    21. DOMImplementationSource
    22. DOMLocator
    23. DOMObject
    24. DOMParser
    25. DOMPoint
    26. DOMPointInit
    27. DOMPointReadOnly
    28. DOMRect
    29. DOMString
    30. DOMTimeStamp
    31. DOMTokenList
    32. DOMUserData
    33. Document
    34. DocumentFragment
    35. DocumentType
    36. ElementTraversal
    37. Entity
    38. EntityReference
    39. Event
    40. EventTarget
    41. HTMLCollection
    42. MutationObserver
    43. Node
    44. NodeFilter
    45. NodeIterator
    46. NodeList
    47. NonDocumentTypeChildNode
    48. ProcessingInstruction
    49. PromiseResolver
    50. Range
    51. StaticRange
    52. Text
    53. TextDecoder
    54. TextEncoder
    55. TimeRanges
    56. TreeWalker
    57. TypeInfo
    58. USVString
    59. UserDataHandler
    60. XMLDocument