Question

我试图确定容器中图像的高度，如果任何图像的高度小于300像素，那么我希望它的容器高度设置为自动。

这是我的代码：

<style>
.container {
    width: 500px;
    height: 500px;
}    
</style>

<script>
var img = document.getElementsByTagName("img");
if (img.height < 300) {
    var x = document.getElementsByClassName('container');
    x.style.height="auto";
}
</script>

<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="250" width="250" src="/some_img.jpg"/> // This image height is less than 300 pixels.
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>

任何帮助都将不胜感激。

Answer 1

首先获取所有图像标记，然后迭代它们，如果它们的高度小于500，则获得其父元素并将其高度设置为“auto” here是一个有效的例子

var img = document.getElementsByTagName("img");
console.log(img)
for (index in img){
    if (img[index].height < 300) {
        img[index].parentNode.style.height="auto";
    }
}

Answer 2

img = getElementsByTagName("img")会返回所有图片，而不只是一张图片，因此您无法将其用作img.height，您应该使用for循环或jQuery选择器
x = document.getElementsByClassName('container')也会返回所有元素，因此您无法直接设置其样式。您需要为当前处理过的图像的父元素设置样式，而不仅仅是第一个或全部。您可以使用jQuery .parent()
您的脚本在img元素开始存在之前执行。要么在html之后放置脚本，要么使用jQuery $(document).ready() event
我认为你应该在src（src="./some_img.jpg"）

因此，使用jQuery，它将如下所示：

<script>
$(document).ready(function(){
    $("img").each(function(){
        if( $(this).height() < 300 ) {
            $(this).parent().height( "auto" );
        }
    });
});
</script>

Answer 3

Vanilla JS

迭代图像。如果他们是<300并且他们的父母拥有＆＃39;容器＆＃39;然后将父级的style.height设置为＆＃39; auto：

var imgs = document.getElementsByTagName("img");
for (i in imgs){
    if (imgs[i].height < 300 && imgs[i].parentNode.className.indexOf('container') != -1) {
        imgs[i].parentNode.style.height="auto";
    }
}

＆＃13;

var imgs = document.getElementsByTagName("img");
for (i in imgs){
    if (imgs[i].height < 300  && imgs[i].parentNode.className.indexOf('container') != -1) {
        imgs[i].parentNode.style.height="auto";
    }
}

＆＃13;

.container {
    width: 500px;
    height: 500px;
}

＆＃13;

<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/" />
</div>
<div class="container">
    <img height="250" width="250" src="http://www.placehold.it/250/250/"/><!--This image height is less than 300 pixels.-->
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>

＆＃13;

的jQuery

使用jQuery's filter()查找包含高度＆lt;的图片的所有.container 300：

$(".container")
    .filter(function(){return $(this).find("img").height() < 300;})
    .css("height", "auto");

＆＃13;

$(function(){
    $(".container").filter(function(){return $(this).find("img").height() < 300;}).css("height", "auto");
  });

＆＃13;

.container {
    width: 500px;
    height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/" />
</div>
<div class="container">
    <img height="250" width="250" src="http://www.placehold.it/250/250/"/><!--This image height is less than 300 pixels.-->
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>

＆＃13;

获取图像高度并将图像容器高度更改为自动

3 个答案:

Vanilla JS

的jQuery