how to change a value with jquery

Question

i have a 3rd party script and its setting a width and height on images and i for the life of me i cant figure out how its doing it. its probably from the database or a class but there are alot of them.

it looks something like this

<img src="..." width="30px" height="30px">

using jquery how i can change the values within height and width?

im guessing its something like

$("..[$width="]").replace(

here is the html of the element

<div id="prodThumbnails">
<table style="width: 641px;">
<tbody>
<tr>
<td align="right" style="vertical-align: middle;">  
</td>   
<td nowrap="nowrap" class="productPhotoThumbnailSection">
<a onclick="javascript:drawMainImage('0', '')" href="javascript:swapImage()">
<img height="30" width="30" border="0" title="" alt="" 
src="images/products/85.png"/></a>
     
<a onclick="javascript:drawMainImage('1', '')" href="javascript:swapImage()"><img height="30" width="30" border="0" title="" alt="" 
src="images/products/90.jpg"/></a>
     
<a onclick="javascript:drawMainImage('2', '')" href="javascript:swapImage()">
<img height="30" width="30" border="0" title="" alt="" src="images/products/92.jpg"/></a>
</td>
<td align="left" style="vertical-align: middle;">
</td>
</tr>
</tbody>
</table>
</div>

i tried doing this

$(function() {
   $("td.productPhotoThumbnailSection img").attr("width","64px");
   $("td.productPhotoThumbnailSection img").attr("height","64px");

  });

and it keeps setting the image width and heights to 0

Answer 1

Think #attr(key, value) should work here. More at the docs

Answer 2

assuming <img id="blah" ...> above:

$('#blah').attr({
  width: '30px',
  height: '30px'
});

Answer 3

Thus, you want to set a new value for the width and height attributes of the element? You can do that with the attr() function.

Basic example:

element.attr('width', '100');
element.attr('height', '100');

or chained:

element.attr('width', '100').attr('height', '100');

or all at once:

element.attr({
    width: '100',
    height: '100'
});

Where in element can be for example $('img') to get all <img> elements, or $('#imgId') to get the specific <img id="imgId"> element. See the jQuery Selectors section to learn more about selecting elements.

Edit: as response on your edit, after all you don't need the 'px' suffix in the width and height attributes, they are implicitly already in pixels. You only need the 'px' when you want to change the associated CSS properties such as element.css('width', '100px');. I've updated my answer accordingly.

Answer 4

jQuery operates on the elements in the DOM, not the elements' attributes.

You need a selector that selects your img element and then edits your attribute.

$("img").attr('width', '35px')
$("img").attr('height', '35px')

You probably need a more specific selector than "img" though. Do your images have a class or an id?

Answer 5

Have you tried using attr( key, value )?

You could do: $('img').attr('height', '50px'); $('img').attr('width', '50px');

Answer 6

Maybe the problem is with the selector. Try

$('td.productPhotoThumbnailSection').children().children('img').attr({ width: '100', height: '100' })

I've tried that and that worked!!!

Answer 7

Do this:

$(function() {
  $("td.productPhotoThumbnailSection img").attr({
    width: 64,
    height: 64
  });
});

Note that it is a simple number ("64") with no unit of measurement ("64px"). The latter is a valid CSS value but not a valid HTML value (for this attribute). The only valid unit of measurement in this context is a percentage.

See the IMG element from the HTML specification where height and width are of type %Length and %Length is defined as:

nn for pixels or nn% for percentage length

ie "64px" is not valid.