jQuery : manipulate width and height of an img tag
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.
加载中,请稍侯......
精彩评论