3

JQuery を使用して画像の元の幅を取得し、画像の幅が 700px を超える場合に条件付きで CSS を調整しようとしています。

このコードを使用して、画像の幅を取得しました。

var img = new Image();
img.src = $('#imageViewerImg').attr('src');
img.onload = function () {
    var W2 = this.width;
    alert(''+ W2);
}

Fiddle

警告ボックスに画像の幅 (この場合は 1024) が表示されていることがわかります。このコードをコピーして貼り付けると、私の Web サイトでは機能しません。アラートボックスが表示されないだけです。他の JQuery コードが機能するように、JQuery を適切に含めました。本来の機能を実行しないのは、この単純な JQuery の一部です。

最後に、これは私が作成しようとしている機能に必要なコードです。

var img = new Image();
img.src = $('#imageViewerImg').attr('src');
img.onload = function() {
    var imgWidth = this.width;
}
if($imgWidth > 700) {
    $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
}

警告ボックスが JSfiddle には表示されるのに、自分の PC には表示されないのはなぜですか?

また、document.ready 関数を使用しても、まだ機能しません。JQuery は単に実行されていません。

4

4 に答える 4

2

次のように jQuery ドキュメントの準備完了関数を使用します。

$(document).ready(function(){

});

これは、jsFiddles からコピーされたコードの一般的な「バグ」です。

于 2013-07-23T14:49:20.907 に答える
1

次のようにしてみてください。

var img = new Image();
img.onload = function () {
    var W2 = this.width;
    if(W2 > 700) {
        var photoHolder = document.getElementById("photoHolder");
        photoHolder.style.verticalAlign = 'none';
        photoHolder.style.textAlign = 'none';
    }
}
img.src = document.getElementById('imageViewerImg').src;

また、コンソールを開いてエラーを確認し、その ID を持つ要素が 1 つしかないことを確認します。

于 2013-07-23T14:57:55.020 に答える
0

これを使用して、html の読み込み後にコードが実行されるようにします。

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

    img.src = $('#imageViewerImg').attr('src');

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

    if($imgWidth > 700) {
        $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
    }
});
于 2013-07-23T14:49:09.483 に答える
0

変数$imgWidthはコード内で宣言されてimgWidthおらず、関数の外にスコープがありません。

試す：

var img = new Image();
img.src = $('#imageViewerImg').attr('src');
var imgWidth='';
img.onload = function() {
    imgWidth = this.width;
}
if(imgWidth > 700) {
    $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
}
于 2013-07-23T15:05:01.913 に答える