Question

我正在尝试在html页面上获取所有图像元素，然后检查每个图像是否width < height（人像）然后旋转它。

问题是我的脚本不适用于每个图像，但不适用于所有图像，因为我是通过“ img”标签获取图像的，所以我不知道如何对单个图像应用旋转。

是否可以这样做而不必修改每个图像的标记（我想避免为每个图像添加id）？

<script>
$(document).ready(function() {
    var imgs = document.getElementsByTagName("img");

    for (var i = 0; i < imgs.length; i++) {
        img = document.getElementsByTagName("img")[i];
        var width = img.clientWidth;
        var height = img.clientHeight;
        if(width<height){
            img.setAttribute('style','transform:rotate(90deg)'); //how do I apply this for each image?
        }
        else{
        }
    }
});
</script>

Answer 1

您的代码似乎适用于正确尺寸的图像。但是，您可以稍微更改代码。对于您提供的代码，您无需执行以下操作：

img = document.getElementsByTagName("img")[i];

在每次循环的for循环中

，因为这是一个运行成本很高的函数。相反，您已经将document.getElementsByTagName("img");的结果存储在imgs中，因此可以改用它：

img = imgs[i];

请参见下面的工作示例：

$(document).ready(function() {
  var imgs = document.getElementsByTagName("img");
  var imgSrcs = [];

  for (var i = 0; i < imgs.length; i++) {
    img = imgs[i];
    var width = img.clientWidth;
    var height = img.clientHeight;
    if (width < height) {
      img.setAttribute('style', 'transform:rotate(90deg)'); 
    }
  };
});

img {
  height: 150px;
  width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Width &gt; Height</p>
<img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" />

<p>Width &lt; Height</p>
<img src="https://d1qb2nb5cznatu.cloudfront.net/startups/i/32728-274244db60c65e1cc32abb4c54a2c582-medium_jpg.jpg?buster=1442602512" />

<p>Width &lt; Height</p>
<img src="https://images.unsplash.com/photo-1522092787785-60123fde65c4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94d6ebf03fdc6a3c8159ac9aeceb0483&w=1000&q=80" />

也，由于您使用的是jQuery，因此使用jQuery方法甚至可以更轻松地做到这一点：

$(document).ready(function() {
  $('img').each((_, elem) => {
    let width = $(elem).width();
    let height = $(elem).height();
    if(width < height) {
      $(elem).css({'transform': 'rotate(90deg)'});
    }
  });
});

img {
  height: 150px;
  width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Width &gt; Height</p>
<img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" />

<p>Width &lt; Height</p>
<img src="https://d1qb2nb5cznatu.cloudfront.net/startups/i/32728-274244db60c65e1cc32abb4c54a2c582-medium_jpg.jpg?buster=1442602512" />

<p>Width &lt; Height</p>
<img src="https://images.unsplash.com/photo-1522092787785-60123fde65c4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94d6ebf03fdc6a3c8159ac9aeceb0483&w=1000&q=80" />

Answer 2

我尝试了提供的代码，但在很多情况下（例如重新加载），它没有获得图像的宽度和高度。

似乎不是使用

$(document).ready(fn)

您应该使用

$(window).on("load", fn)

关于这个主题Official way to ask jQuery wait for all images to load before executing something

的问题

Answer 3

<script>
$(document).ready(function() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];

    for (var i = 0; i < imgs.length; i++) {
        var img = document.getElementsByTagName("img");//add all images in array
        var width = img[i].clientWidth;
        var height = img[i].clientHeight;
        if(width<height){
            img[i].setAttribute('style','transform:rotate(90deg)'); //change style for current image
        }
        else{
        }
    }
});
</script>

如果宽度<高度使用Javascript旋转图像而不修改每个图像？

3 个答案: