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

Question

我的页面中有很多图片，我想隐藏那些高度大于宽度的图片。我尝试使用这个简单的代码，但它不起作用。超文本标记语言<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">...JSwindow.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     }   }};我无法使用 Jquery。

Answer 1

您忘记了图像数组的索引

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

    }

  }

};

考虑每个

const imgList = document.getElementsByClassName("my_pictures_class");

Array.from(imgList).forEach(img => {

  const height = img.clientHeight

  const width = img.clientWidth

  if (height > width) {

    img.style.display = "none";

  }

})

Answer 2

您错过了提及索引。尽管您可以通过使用querySelectorAll()and来避免使用索引forEach()，如下所示：

window.onload = function() {

   var imgList = document.querySelectorAll(".my_pictures_class");

   imgList.forEach(function(img){

     var width = img.clientWidth;

     var height = img.clientHeight;

     if (height>width){

       img.style.display = "none";

     }

     else{

        //Nothing

     }

   });

};

<img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" class="my_pictures_class">

<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="my_pictures_class">

<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="my_pictures_class">

<img src="https://homepages.cae.wisc.edu/~ece533/images/serrano.png" class="my_pictures_class">

<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="my_pictures_class">