Why document.getElementById("mydiv").style.width doesn't return the width of mydiv ? It returns an empty string. Some people suggested using offsetWidth, but it doesn't make sense to me why you can't get it from style.width.
-
Please share a small demo of this where we can see the issue in action.palaѕн– palaѕн2020-03-27 14:16:03 +00:00Commented Mar 27, 2020 at 14:16
-
check this developer.mozilla.org/en-US/docs/Web/API/HTMLElement/… stackoverflow.com/questions/4787527/…Hitesh Anshani– Hitesh Anshani2020-03-27 14:17:11 +00:00Commented Mar 27, 2020 at 14:17
-
It would only return width value if set by a style via css, otherwise you would need use javascript width. stackoverflow.com/a/26718430/10634638estinamir– estinamir2020-03-27 14:19:49 +00:00Commented Mar 27, 2020 at 14:19
-
.style.width if there a inline style on the container. you may check .offsetWidth for the containerRiku– Riku2020-03-27 14:23:34 +00:00Commented Mar 27, 2020 at 14:23
Add a comment
|
1 Answer
The topic of DOM element dimensions is complicated.
You probably want one of :
The
HTMLElement.offsetWidthread-only property returns the layout width of an element as an integer.Typically,
offsetWidthis 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::beforeor::after.If the element is hidden (for example, by setting
style.displayon the element or one of its ancestors to "none"), then0is returned.
The
Element.clientWidthproperty 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
clientWidthis 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.
The
Element.getBoundingClientRect()method returns the size of an element and its position relative to the viewport.The element's size is equal to its width/height + padding in the case that the standard box model is being used, or width/height only if
box-sizing: border-boxhas been set on it.
jQuery hides some of this complexity behind a .width method.
const $ = document.querySelector.bind(document)
const d1 = $('#unstyled')
const d2 = $('#stylesheet')
const d3 = $('#inline')
const details = $('#details')
details.innerHTML = (`
<table>
<tr>
<td><h2>A</h2> offsetWidth: '${d1.offsetWidth}', clientWidth: '${d1.clientWidth}', getBoundingClientRect().width: '${d1.getBoundingClientRect().width}', style.width: '${d1.style.width}'
</td>
</tr>
<tr>
<td><h2>B</h2> offsetWidth: '${d2.offsetWidth}', clientWidth: '${d2.clientWidth}', getBoundingClientRect().width: '${d2.getBoundingClientRect().width}', style.width: '${d2.style.width}'
</td>
</tr>
<tr>
<td><h2>C</h2> offsetWidth: '${d3.offsetWidth}', clientWidth: '${d3.clientWidth}', getBoundingClientRect().width: '${d3.getBoundingClientRect().width}', style.width: '${d3.style.width}'
</td>
</tr>
</table>`)* {
box-sizing: border-box;
font-family: sans-serif;
font-size: .9rem;
}
#stylesheet {
line-height: 50px;
width: 100px;
height: 50px;
text-align: center;
padding: 5px;
margin: 5px;
border: 5px solid red;
}
div {
display: inline-block;
box-shadow: 0 0 0px 1px silver inset;
}
table {
border: 0px;
}
td {
text-align: left;
padding: 0px;
}<div id="unstyled">A</div>
<div id="stylesheet">B</div>
<div id="inline" style="width:100px;height:50px;text-align: center;line-height: 50px; padding: 5px; margin: 5px; border: 5px solid red;">C</div>
<section id="details"></section>
