更改元素的尺寸

阿米尔·萨萨尼（Amir Sasani）

我想用jquery plz将许多元素（figcaption）尺寸更改为img尺寸，帮助我

var width = $("div[caption='true'] img").attr("width");

var height = $("div[caption='true'] img").attr("height");

$("div[caption='true'] figcaption").css("width",width);
$("div[caption='true'] figcaption").css("height",height);

jsfiddle链接

芜菁

您当前的代码是将eachfigcaption的高度和宽度设置为第一张图片的高度和宽度。试试这个：

$(document).ready( function() {

    $("div[caption='true']").each(function() {
        var $this = $(this);
        var width = $("img", $this).attr("width");
        var height = $("img", $this).attr("height");
        $("figcaption", $this).css({"height":height, "width":width});
    });

});

演示

下面的代码段：

$(document).ready( function() {
	
	
    $("div[caption='true']").each(function() {
        var $this = $(this);
        var width = $("img", $this).attr("width");
        var height = $("img", $this).attr("height");
        $("figcaption", $this).css({"height":height, "width":width});
    });
	
});

*{margin:0;padding:0;}
.imgs{position:relative;}
figcaption{position:absolute;top:0;
    background-color:rgba(0,0,0,0.4);}
figcaption h3{text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgs" caption="true">
  
   <img src="http://goo.gl/uRvjRS" width="200" height="250" alt=""/>
   <figcaption>
    <h3>IMGs Caption 1</h3>
   </figcaption>
  
  </div>
  
  <div class="imgs" caption="true">
  
   <img src="http://goo.gl/uRvjRS" width="100" height="100" alt=""/>
   <figcaption>
    <h3>IMGs Caption 2</h3>
   </figcaption>
  
  </div>
  
  <div class="imgs" caption="true">
  
   <img src="http://goo.gl/uRvjRS" width="300" height="200" alt=""/>
   <figcaption>
    <h3>IMGs Caption 3</h3>
   </figcaption>
  
  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。