开发者

jQuery : manipulate width and height of an img tag

开发者 https://www.devze.com 2023-04-08 05:23 出处:网络
How do I change the height and width of an image in and unordered list with jQuery <ul id=\"files\">

How do I change the height and width of an image in and unordered list with jQuery

<ul id="files">
   <li><img src="1.png" /></li>
   <li><img src="2.开发者_开发技巧png" /></li>
   <li><img src="3.png" />/li>
</ul>

My css :

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

I've tried this :

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


If you pass jQuery a number for a width or height, it assumes the value is in pixels, but if you pass it a string, it demands a valid CSS unit. You can either say

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

or

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


Your code works fine for me.

You probably have to include these functions within $(document).ready, because you're currently running the code before the tags exist.

Example:

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


use the jquery .css method instead

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


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


Give the images a class, and select it by class doing this:

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

Javascript:

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


Apart from the mistake in your markup (last closing li tag missing <) your code will work as expected. You have to make sure your code is run after the document is ready though:

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

Tested with jQuery 1.6.4.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号