javascript - 更改图像相对宽度

Question

如何动态更改图像的相对百分比宽度？

<div style="width: 350px; background-color: #DDDDDD">
    <img id="gradient" src="img.png" style="width: 74.074%;"></img>
</div>

我无法使用 jqueryattr()或点获得宽度：

<input type="submit" value="button" />

<script>                                                                      
$(function() {
  $( "input[type=submit], a, button" )
    .button()
    .click(function( event ) {
     $("#gradiant").width;
  });
});
</script>

Answer 1

利用：

$("#gradiant").width();

width()：

获取匹配元素集中第一个元素的当前计算宽度或设置每个匹配元素的宽度。或者：

$("#gradiant").outerWidth();

Outerwidth()：

获取匹配元素集中第一个元素的当前计算宽度，包括填充和边框。

您还可以将布尔值传递给方法.outerWidth(true)，以margin在返回的宽度中包含（第一个）元素的。

顺便说一句，我在jQuery API中找不到对方法的任何引用，并且搜索仅返回选择器，使用不存在的方法将导致错误（检查控制台）。button():button

参考：

• outerWidth().
• width().

Answer 2

gradiAnt!= gradient
<img></img>!=<img />

<div style="width: 350px; background-color: #DDDDDD">
    <img id="gradient" src="img.png" style="width: 74.074%;" />
</div>
<input type="submit" value="button" />

<script>                                                                      
$(function() {
  $( "input[type=submit]").click(function() {
     var imgW = $("#gradient").width(); // in PX (Number)
     var parentW= $("#gradient").closest('div').width();
     var percent= imgW*100/parentW;

     alert(imgW +' '+ parentW +' '+ percent +'%');

  });
});
</script>