Question

如何使用jQuery

更改图像的高度和宽度以及无序列表

<ul id="files">
   <li><img src="1.png" /></li>
   <li><img src="2.png" /></li>
   <li><img src="3.png" />/li>
</ul>

我的css：

ul#files li img
{
width: 100px;
height:100px;
}

我试过这个：

$('ul > li > img').width('300');
$('ul > li > img').height('300');

Answer 1

如果你传递jQuery一个宽度或高度的数字，它假定值是以像素为单位，但如果你传递一个字符串，它要求一个有效的CSS单位。你可以说

$('ul > li > img').width(300);

或

$('ul > li > img').width('300px');

Answer 2

您的代码适用于我。

您可能必须在$(document).ready中包含这些功能，因为您目前在代码存在之前运行代码。

示例：

<script>
$(document).ready(function(){
   $('ul > li > img').width('300');
   $('ul > li > img').height('300');
});
</script></head><body>
<ul id="files">
   <li><img src="1.png" /></li>
   <li><img src="2.png" /></li>
   <li><img src="3.png" />/li>
</ul>

Answer 3

使用jquery .css方法

$('ul > li > img').css('width', '300px');
$('ul > li > img').css('height', '300px');

Answer 4

$('#files').each(function(a, b){ $(b).height(300); $(b).width(300); })

Answer 5

给图像一个类，然后按类选择它：

<img src="1.png" class="image_class">

使用Javascript：

$('.image_class').height('300');
$('.image_class').width('300');

Answer 6

除了标记中的错误（最后关闭li标签丢失＆lt;）之外，您的代码将按预期工作。您必须确保在文档准备就绪后运行代码：

$(document).ready(function() {
    $('ul > li > img').width('300');
    $('ul > li > img').height('300');
});

使用jQuery 1.6.4进行测试。

jQuery：操纵img标签的宽度和高度

6 个答案: