如何使用javascript定位所有類。 沒有jQuery

Question

我正在編寫一個響應式程序，它不斷改變某些元素的寬度，對應於其他具有％寬度的元素。 哪個工作正常。 但是當我想要將div中的所有圖像更改為與圖像的大父母一樣大時，我遇到了一個問題。

JS：

var thebigone = document.getElementById('imgpresentation');
var demimages = document.getElementsByClassName('presentatinthis');

fixtheresponsiveness = setInterval(fixthis,1000);
function fixthis()
{
    demimages.style.width = thebigone.offsetWidth+"px";
}

fixtheresponsiveness();

HTML：

<div id="imgpresentation" class="imgpresentation">
    <div id="slidethemimgpresentation" class="slidethemimgpresentation">
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg1.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg2.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg3.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg4.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg5.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg6.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg7.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg8.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg9.jpg"/>
        <img class="presentatinthis" src="img/billeder/xyachtvisit/xyachtbesoeg10.jpg"/>
    </div>
</div>

如果我將“class”替換為“id”和“getelementsbyclassname”替換為“getelementbyid”，但它只適用於div中的第一個img。

我不想使用jQuery，所以請不要建議$（'。presentatinthis'）

Answer 1

document.getElementsByClassName返回一個NodeList ，這意味着你必須遍歷結果才能訪問並設置每個Node的 style

var i = demimages.length;
while (i--) demimages[i].style.width = thebigone.offsetWidth+"px";