需要以DIV的像素百分比与JS

Question

我有 PHP 创建的盒子。它们的宽度设置为 CSS 中容器的 100%。我需要找到那个盒子的等效像素...

HTML

<div class="masonry" >
<? while($row = $stmt->fetch()){    ?>

     <div class="item" id="needwidth" >
            <a href="#"><img src="..."></a>
     </div>
   <? } ?>
</div>

CSS（masonry 将根据可用的屏幕宽度添加列）

.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;  }
}

我在 header:

中试过这个 JS

<script>var width = document.getElementById('needwidth').offsetWidth;</script>

在我的 HTML 中，我稍后用这个测试它：

<script>document.write(width);</script>

但它说：

undefined

Answer 1

您可以使用 clientWidth 来获取您想要的值。但是您必须将代码从 header 移动到页面末尾或运行由 onLoad 事件调用的函数中的代码，因为当您尝试获取属性值。

<!-- It may not work -->
<script>alert(document.getElementById('needwidth').clientWidth);</script>
<div class="item" id="needwidth" ></div>

...

<!-- It works -->
<div class="item" id="needwidth" ></div>
<script>alert(document.getElementById('needwidth').clientWidth);</script>

如果你可以在你的项目中使用jQuery。您可以使用下面描述的一些方法：

$('#needwidth').width();
$('#needwidth').outerWidth();
$('#needwidth').prop('clientWidth');

查看这个 JSFIDDLE：http://jsfiddle.net/nanndoj/gjtkvrsy/3/

需要以DIV的像素百分比与JS

Need with in pixel of a DIV in percentage with JS

html

javascript

css