CODEWITHSUNDEEP
javascriptcss
AndSolomin34
AndSolomin34

Reputation: 409

how to get element width when using table-like behaviour

I had to put multiple divs in a line (horizontally) inside another div. So I did this:

for(var i = 0; i < 10; i++) {
    var elem = document.createElement("div");
    elem.className = "day_cell";
    elem.id = 'p'+i;
    document.getElementById("day_scale").appendChild(elem);
}
#day_scale {
    position: absolute;
    display: table;
    width: 100%;
    top: 50%;
    table-layout: fixed;
    border-spacing: 1px;
}

        
.day_cell {
    display: table-cell;
    background-color: #a9cce3;
    padding: 3px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;

    border: 1px solid black;
    border-radius: 2px;

    overflow: hidden;
}
<div id="day_scale">
    	
</div>

And now I need to know those .day_cell elements width. I tried this:

var parts = document.getElementsByClassName("day_cell");
console.log(parts[0].style.width)

but it doesn't work. How do I get the width of those elements? Also if I change the browser window width the elements' width will also change. How do I get new width everytime it changes?

Upvotes: 0

Views: 42

Answers (2)

mplungjan
mplungjan

Reputation: 178328

You can use .clientWidth but perhaps also computedStyle is useful to you

var numElems = 10;

for (var i = 0; i < numElems; i++) {
  var elem = document.createElement("div");
  elem.className = "day_cell";
  elem.id = 'p' + i;
  document.getElementById("day_scale").appendChild(elem);
}
console.log(
  document.querySelector(".day_cell").clientWidth,
  Math.round(
    parseFloat(
      window.getComputedStyle(document.querySelector(".day_cell")).width
    )
  ),
  Math.round(
    parseFloat(
      window.getComputedStyle(document.getElementById("day_scale")).width
    ) / numElems
  )
)
#day_scale {
  position: absolute;
  display: table;
  width: 100%;
  top: 50%;
  table-layout: fixed;
  border-spacing: 1px;
}

.day_cell {
  display: table-cell;
  background-color: #a9cce3;
  padding: 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 1px solid black;
  border-radius: 2px;
  overflow: hidden;
}
<div id="day_scale">

</div>

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075079

You can get the width of non-inline elements via their clientWidth property.

var width = theElement.clientWidth;

That rounds to an integer number of pixels (elements can have a width in pixels that includes a fractional part). You can also use getBoundingClientRect to get the full fractional value and other information about the element's dimensions on-page.

Live Example:

for(var i = 0; i < 10; i++) {
    var elem = document.createElement("div");
    elem.className = "day_cell";
    elem.id = 'p'+i;
    document.getElementById("day_scale").appendChild(elem);
}

setTimeout(function() {
    console.log(document.querySelector(".day_cell").clientWidth);
}, 100);
#day_scale {
    position: absolute;
    display: table;
    width: 100%;
    top: 50%;
    table-layout: fixed;
    border-spacing: 1px;
}

        
.day_cell {
    display: table-cell;
    background-color: #a9cce3;
    padding: 3px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;

    border: 1px solid black;
    border-radius: 2px;

    overflow: hidden;
}
<div id="day_scale">
    	
</div>

The reason .style.width doesn't work is that it just returns the value of the width style within the element's inline style attribute (e.g., "50px" for <div style="width: 50px"></div>), not the actual width of the element. If the element doesn't have an inline style attribute, or that inline style attribute doesn't have a width style, .style.width returns "".

Upvotes: 2

Related Questions