Question

我想通过jquery / javascript更改图像高度我不想为图像设置id。

        <div class="list_carousel">
            <ul id="foo1">
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/1.jpg" alt="" /></li>
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/2.jpg" alt="" /></li>
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/3.jpg" alt="" /></li>
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/4.jpg" alt="" /></li>
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/5.jpg" alt="" /></li>
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/6.jpg" alt="" /></li>
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/7.jpg" alt="" /></li>
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/8.jpg" alt="" /></li>
                <li><img src="<?php echo get_template_directory_uri(); ?>/slider/9.jpg" alt="" /></li>
            </ul>
        </div>

在CSS中

   .list_carousel img {
   width: 100%;
   height: 100%;
   }

Answer 1

在javascript中，您可以使用getElementsByTagName并更改其中一个的高度：

var x = document.getElementsByTagName('li');

x[2].childNodes[0].style.height = '100%';

这会将第三个li标记中的图像更改为100％的高度。

我不明白你是否想要改变所有图像，但是如果你做了，你可以使用for loop：

var x = document.getElementsByTagName('li');
for(var i = 0; i < x.length; i++)
{
    x[i].childNodes[0].style.height = '100%';
}

这是一个工作小提琴：http://jsfiddle.net/28L4R/2/

Answer 2

您可以使用以下选项选择所有图像：

$('#foo1 img')

或者：

$('#foo1').find('img')

因此，您可以使用以下方法将高度更改为100％

$('#foo1').find('img').css({ height: '100%' });

或者，如果要将高度更改为像素数（例如，60）：

$('#foo1').find('img').height(60);

如果您只想更改一张图片，可以使用：

$('#foo1').find('img').eq(index).height(60);

其中index是图像的从零开始的索引。

通过jquery / javascript更改图像高度

2 个答案: