Question

基本上，我需要将“style =”width：__“添加到”img-container“div中，其宽度是所有图像及其填充的总和。图像和图像宽度是通过CMS动态添加的，这就是我需要javascript动态计算宽度的原因。

<div id='img-container'[HERE IS WHERE I NEED THE WIDTH TO BE ADDED]>
<div class='picture_holder' >
<div class='picture' >
<img src="{image}" style='width:{width}px;padding-right:10px;'/>
<div class='captioning'>{caption}</div>
</div>
</div>
</div>

我根本不知道javascript，但是试图拼凑一些东西（我甚至没有添加填充）：

<script type="text/javascript">
var $name = ('div#img-container');
var Imgs = div.getElementsByTagName('img');
var w = 0;
for ( var i = 0; i < Imgs.length; i++ ){
    w += parseInt(Imgs[i].offsetWidth);
}
</script>

显然，它根本不起作用。任何帮助将不胜感激！

Answer 1

代码在var $name = ('#div ...中有一个错误。您必须使用document.getElementById(id-of-element)。 #div...语法是jQuery选择器，据我所知，你没有使用jQuery。接下来，您调用div.getElementsByTagName('img') to get only the list of images inside the div`。试试这个：

<script type="text/javascript">

function add_width_of_images(container) {
    var div = document.getElementById(container);
    if (!div) return;

    var Imgs = div.getElementsByTagName('img');
    var w = 0;
    for ( var i = 0; i < Imgs.length; i++ ){
        w += parseInt(Imgs[i].offsetWidth);
    }
    div.style.width = w + "px";
}
add_width_of_images('img-container');

</script>

Javascript：计算div的宽度作为图像的总和

1 个答案: