この記事の例では、画像がロードされた後に画像の実際の幅と高さを決定する 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 プログラミングのすべての人に役立つことを願っています。