Javascript 如果图像的高度大于宽度，则隐藏图像

我的页面中有很多图片，我想隐藏那些高度大于宽度的图片。 我尝试了这个简单的代码，但它不起作用。

HTML

<img src="/path/img_1" class="my_pictures_class">
<img src="/path/img_2" class="my_pictures_class">
<img src="/path/img_3" class="my_pictures_class">
<img src="/path/img_4" class="my_pictures_class">
<img src="/path/img_5" class="my_pictures_class">
...

...

JS

window.onload = function() {
   var i, img;
   var img = document.getElementsByClassName("my_pictures_class"); 
   for (i = 0; i < img.length; i++) {
     var width = img.clientWidth;
     var height = img.clientHeight;
     if (height>width){
       img[i].style.display = "none";
     }
     else{
        //Nothing
     }
   }
};

window.onload=function（）{
varⅠ，img；
var img=document.getElementsByClassName（“我的图片类”）；
对于（i=0；i宽度）{
img[i].style.display=“无”；
}
否则{
//没什么
}
}
};

我不能使用Jquery

---

谢谢

您忘记了图像数组的索引

window.onload = function() {
  var i, img;
  var img = document.getElementsByClassName("my_pictures_class");
  for (i = 0; i < img.length; i++) {
    var width = img[i].clientWidth;
    var height = img[i].clientHeight;
    if (height > width) {
      img[i].style.display = "none";
    }
  }
};

---

您忘记了图像数组的索引

window.onload = function() {
  var i, img;
  var img = document.getElementsByClassName("my_pictures_class");
  for (i = 0; i < img.length; i++) {
    var width = img[i].clientWidth;
    var height = img[i].clientHeight;
    if (height > width) {
      img[i].style.display = "none";
    }
  }
};

---

你没提到索引。尽管您可以通过使用

queryselectoral（）

和

forEach（）

避免使用索引，如下所示：

window.onload=function（）{
var imgList=document.queryselectoral（“.my_pictures_class”）；
imgList.forEach（函数（img）{
变量宽度=img.clientWidth；
变量高度=img.clientHeight；
如果（高度>宽度）{
img.style.display=“无”；
}
否则{
//没什么
}
});
};
您没有提到索引。尽管您可以通过使用
queryselectoral（）
和
forEach（）
避免使用索引，如下所示：


window.onload=function（）{
var imgList=document.queryselectoral（“.my_pictures_class”）；
imgList.forEach（函数（img）{
变量宽度=img.clientWidth；
变量高度=img.clientHeight；
如果（高度>宽度）{
img.style.display=“无”；
}
否则{
//没什么
}
});
};

再次检查此项
var width=img.clientWidth；变量高度=img.clientHeight
如果您运行Eugen发送的代码，但仍然无法获取图像的高度和宽度。我可以问一下你的脚本标签是在HTMLIt的顶部（图片上方）还是底部（图片下方）吗？好的，你试过document.ready而不是onload了吗？我唯一能想到的是，在脚本运行之前，时间已经过了，图像没有被加载。问题是我不能使用JQuery，但我可以尝试将我的代码放在页面顶部再次检查
var width=img.clientWidth；变量高度=img.clientHeight
如果您运行Eugen发送的代码，但仍然无法获取图像的高度和宽度。我可以问一下你的脚本标签是在HTMLIt的顶部（图片上方）还是底部（图片下方）吗？好的，你试过document.ready而不是onload了吗？我唯一能想到的是，在脚本运行之前，时间已经过了，图像也没有加载。问题是我不能使用JQuery，但我可以尝试将我的代码放在页面控制台的顶部。记录你的高度和宽度，看看它们是否存在尽管我的图像是可见的，console.log的结果是0即使您没有为它们分配属性，您也应该获取它们，您的图像是否显示？当然，它们是显示的且可见的。我刚刚写了这个代码<代码>var-width=img[i].clientWidth；var height=img[i]。clientHeight；控制台。原木（宽度）；控制台。原木（高度）
console.log记录您的高度和宽度以查看它们是否存在尽管我的图像可见，console.log的结果是0您应该获取它们，即使您没有为它们指定属性，您的图像是否显示？当然，它们是显示和可见的。我刚刚写了这个代码<代码>var-width=img[i].clientWidth；var height=img[i]。clientHeight；控制台。原木（宽度）；控制台。原木（高度）