javascript - Javascript：将div的宽度计算为图像的总和

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). sintax#div...是 jQuery 选择器，据我了解，您没有使用 jQuery。接下来，您调用div.getElementsByTagName('img') to get only the list of images inside thediv`。尝试这个：

<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>