ホームページ > ウェブフロントエンド > jsチュートリアル > 画像が読み込まれた後に画像の実際の幅と高さを決定する js メソッド_javascript スキル

画像が読み込まれた後に画像の実際の幅と高さを決定する js メソッド_javascript スキル

WBOY
リリース: 2016-05-16 15:13:39
オリジナル
1318 人が閲覧しました

この記事の例では、画像がロードされた後に画像の実際の幅と高さを決定する js のメソッドを説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

通常、画像の幅/高さを取得するにはjqの.width()/.height()メソッドを使用するか、画像の幅/高さを取得するにはjsの.offsetwidth/.offsetheightメソッドを使用しますが、これらのメソッドはスタイルが画像の幅と高さを設定した後、取得されるのは画像の実際の幅と高さではないため、そのような結果を取得する方法はありますか。実際の幅と高さは?答えは「はい」です。次のコードでこの問題を解決できます:

<img src="01.jpg" id="test" width="250px">

ログイン後にコピー

js コード:

//图片加载完成后获取图片实际宽高
var _test = document.getElementById("test");
test.onload = function(){
  imgSize.call(_test);
}
function imgSize(){
  var imgObj = new Image();
  imgObj.src = this.src;
  alert(imgObj.width + "\n" + imgObj.height);
}

ログイン後にコピー

この実際の幅と高さを他のメソッドで呼び出したい場合は、alert(imgObj.width + "n" + imgObj.height); を変更して imgObj を返し、呼び出しメソッドを次のように変更する必要があります。

window.onload = function(){
    function a(){
      var real= imgSize.call(_test);
      var realwidth = real.width;
      alert(realwidth);
    }
    a();
}

ログイン後にコピー
上記の方法は面倒すぎるので、私なりに改良した結果、略称は次のようになります。

window.onload = function(){
    var _test = document.getElementById("test"); //若是jq,则直接将此代码换成 var _test = $("#test"); 即可。
    var imgObj = new Image();
    imgObj.src = _test.src; //若是jq,则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
    alert(imgObj.width);
}

ログイン後にコピー
このようにして、画像の実際の幅と高さを他のメソッドで直接呼び出すことができます。

さらに JavaScript 関連のコンテンツに興味のある読者は、このサイトの特別トピックをチェックしてください: 「

JavaScript 検索アルゴリズム技術の概要」、「JavaScript アニメーションの特殊効果と技術の概要」 "、"JavaScript エラーとデバッグ手法の概要"、"JavaScript データ構造とアルゴリズム手法の概要"、"JavaScript トラバーサル アルゴリズムと手法の概要」と「JavaScript 数学の操作方法の概要

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

関連ラベル:
js
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート