Question

我有一个第三方脚本，它在图像上设置宽度和高度，但对于我的生活，我无法弄清楚它是如何做到的。它可能来自数据库或类，但有很多。

HTML看起来像这样：

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

使用jQuery，我该如何更改高度和宽度值？

我猜它是这样的：

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

以下是元素的HTML：

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

我试过这样做：

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

  });

但它会将图像宽度和高度设置为0。

Answer 1

因此，您想为元素的width和height 属性设置新值吗？您可以使用attr()函数执行此操作。

基本示例：

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

或链式：

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

或一次性全部：

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

element可以在$('img')中获取所有<img>元素，或$('#imgId')获取特定<img id="imgId">元素。请参阅jQuery Selectors部分，详细了解如何选择元素。

修改：作为对您的修改的回复，毕竟您不需要width和height属性中的'px'后缀，它们已经隐含在像素。当您想要更改关联的CSS属性（例如element.css('width', '100px');）时，只需要'px'。我已相应更新了我的答案。

Answer 2

假设上面有<img id="blah" ...>：

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

Answer 3

您是否尝试过使用attr( key, value )？

你可以这样做： $('img').attr('height', '50px'); $('img').attr('width', '50px');

Answer 4

认为#attr（key，value）应该在这里工作。更多信息来自docs

Answer 5

jQuery对DOM中的元素进行操作，而不是元素的属性。

您需要一个选择器来选择您的img元素，然后编辑您的属性。

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

你可能需要比“img”更具体的选择器。你的图像有类或id吗？

Answer 6

问题可能出在选择器上。试试

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

我已经尝试过了，那确实有用!!!

Answer 7

这样做：

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

请注意，它是一个简单的数字（“64”），没有测量单位（“64px”）。后者是有效的CSS值，但不是有效的HTML值（对于此属性）。在这种情况下，唯一有效的计量单位是百分比。

请参阅IMG element from the HTML specification，其中高度和宽度的类型为％Length，%Length is defined为：

nn表示像素，nn％表示百分比长度

即“64px”无效。

如何使用jQuery更改属性？

7 个答案: