Question

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

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

我无法使用attr()或点：

获取jquery的宽度

<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 选择器，使用不存在的方法将 result in an error（检查控制台）。

参考文献：

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>

更改图像相对宽度

2 个答案: