Using PHP, I am generating boxes whose width is set to 100% of a container in CSS. Now, I want to determine the equivalent pixel value of that box...
HTML
<div class="masonry" >
<? while($row = $stmt->fetch()){ ?>
<div class="item" id="needwidth" >
<a href="#"><img src="..."></a>
</div>
<? } ?>
</div>
CSS (masonry will add columns based on available screen width)
.item{width: 100%;}
.masonry { column-count: 4;}
@media only screen and (min-width: 400px) {
.masonry { column-count: 2;}
}
@media only screen and (min-width: 700px) {
.masonry {column-count: 3; }
}
@media only screen and (min-width: 900px) {
.masonry {column-count: 4;}
}
@media only screen and (min-width: 1100px) {
.masonry {column-count: 5; }
}
I attempted to utilize this JavaScript in the header:
<script>var width = document.getElementById('needwidth').offsetWidth;</script>
Later in my HTML, I tested it with:
<script>document.write(width);</script>
However, it returns:
undefined