CODEWITHSUNDEEP
jquery
sarmenhb
sarmenhb

Reputation: 335

How to change a attributes with jQuery?

I have a 3rd party script which is setting a width and height on images, but for the life of me I can't figure out how it's doing it. It's probably from the database or a class but there are a lot of them.

The HTML looks something like this:

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

Using jQuery, how can I change the height and width values?

I'm guessing it's 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");

  });

but it keeps setting the image width and heights to 0.

Upvotes: 1

Views: 1085

Answers (7)

Jim
Jim

Reputation: 1

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

Upvotes: 0

cletus
cletus

Reputation: 625387

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.

Upvotes: 0

BalusC
BalusC

Reputation: 1109635

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.

Upvotes: 3

seth
seth

Reputation: 701

Have you tried using attr( key, value )?

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

Upvotes: 1

Tom Martin
Tom Martin

Reputation: 2558

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?

Upvotes: 0

Lior Cohen
Lior Cohen

Reputation: 9055

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

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

Upvotes: 1

nowk
nowk

Reputation: 33181

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

Upvotes: 0

Related Questions