1

私がやろうとしていること:

私が作成している記事のレイアウトは、約 700 ピクセルに及びます。記事のトップは画像です。画像の幅が 600 ピクセル未満の場合、画像float:left;をそれをきちんと。例: 幅 640 ピクセルの画像があります。残念ながら、テキストはまだ折り返されているため、画像の右側に単語の塊が押し込まれます...そのため、画像が含まれる div を全幅に広げたいのです。

jQuery を機能させようとしてきましたが、3 つの異なる方法を試しましたが、どれも機能しませんでした。私は何かが欠けていると思います。画像の幅に関係なく、divスパンを700ピクセルにするだけです。

<div class="story-img">
    <img src="images/sample-article-sm.png" alt="A guy installing Solar Panels" width="350"/><br/>
    <span class="caption">Solar panels being installed on a roof.</span>
</div>

私が使用しているjQuery：

$(document).ready(function() {
var img = $(".story-img > img");
var storydiv = $(".story-img");
var width = img.width();
if (width < 300)
    storydiv.addClass("large");
});

jQueryは正常に機能しており、クラスをdiv「.story-img」に追加していますが、画像の幅に関係なくそれを行います。最初は、画像で幅が指定されていない可能性があるためだと思いました（これは動的にロードされます）。幅をつかまないのはなぜですか？

4

1 に答える 1

2

実際には、画像がdomに追加される前に幅を取得しています

loadイベントを使ってみる

$('.myImage').load(function(){
   alert($(this).width());
   alert($(this).height());
  //do something here
});
于 2013-06-18T19:28:38.827 に答える