javascript - 使用javascript根据图像的布局方向向图像添加不同的类名称？

我想使用普通的javascript，根据图像文件本身的高度是否大于宽度（纵向），或将具有特定类别名称的portrait或landscape应用于所有<img>元素。宽于高（横向）。

我知道我可以按类名称获取所有元素，如下所示：

var portalPics = document.getElementsByClassName("portal-pic");

而且我认为我可以通过比较the HTMLImageElement的naturalHeight和naturalWidth属性来判断每个图像文件的方向，但是我不确定如何。

谁能帮助我编写将在HTML文档中的</body>结束标记之前插入的脚本，该脚本会自动将所需的类名添加到所需的图像中？

最佳答案

您可以循环，检查和分配：

var portalPics = document.getElementsByClassName("portal-pic");
for (var i = 0; i < portalPics.length; i++) {
    if (portalPics[i].naturalWidth > portalPics[i].naturalHeight) {
        portalPics[i].className += " landscape";
    } else {
        portalPics[i].className += " portrait";
    }
}