0

ここの人々の助けを借りて、次のコードで画像の元の幅を取得することができました:

var img = new Image();

        img.onload = function () {
            var W2 = this.width;
            alert(W2);
        }

        img.src = document.getElementById('imageViewerImg').src;

画像の幅を取得したので、画像の幅が 700px を超える場合に CSS を変更する条件ステートメントが必要です。

これを行うための私のコードは次のようになります。

$(document).ready(function(){
        var img = new Image();

        img.onload = function () {
            var W2 = this.width;
        }

        img.src = document.getElementById('imageViewerImg').src;

        if($W2 > 700) {
            $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    });

しかし、これはうまくいきません。条件ステートメントに警告ボックスを追加しようとしたので、画像の幅が 700px を超えた場合に表示されて通知されるはずです。この警告ボックスも表示されません。次のように、アラート ボックスを if ステートメントの外側に配置して、下に配置しただけでは機能しません。

$(document).ready(function(){
            var img = new Image();

            img.onload = function () {
                var W2 = this.width;
            }

            img.src = document.getElementById('imageViewerImg').src;

            alert(W2)
        });

このコードを機能させるには、このコードのどこに if ステートメントを配置すればよいですか?

4

4 に答える 4

0

スコーピングに問題があります:

 $(document).ready(function(){
        var img = new Image();
        var W2;
        img.onload = function () {
            W2 = this.width;
        }

        img.src = document.getElementById('imageViewerImg').src;

        alert(W2);

        if($W2 > 700) {
          $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    });

ステートメントがアクセスできるW2場所を定義する必要があります。if

または

さらに良いことに、onloadイベント ハンドラーに if ステートメントを配置することもできます。

$(document).ready(function(){
    var img = new Image();

    img.onload = function () {
        var W2 = this.width;
        if($W2 > 700) {
          $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    }

    img.src = document.getElementById('imageViewerImg').src;
});
于 2013-07-23T15:17:21.997 に答える
0

jQuery を使用しているため、新しい Image を定義しなくても width() 関数を使用できます。例えば：

<img src="http://bunkerhill.com/images/bh_commander.jpg" alt="Battle Cry"/>
$(function() {
    var w2=$("img").width();
    alert(w2);
    if (parseInt(w2)>700) {
       //do something
    }
});

jsfiddle

于 2013-07-23T15:26:51.603 に答える