しばらく前に、LJWが書いたTouchslider.js Carouselコードに適応画面サイズの関数を追加したときに問題が発生しました。どんな方法を使用しても、IMGタグの高さと幅を得ることはできません。最終的には、画像の高さと幅の比のみを設定できます。私は今日の時間がある間にそれをテストするためにいくつかのデモを書き、その理由を見つけました。詳細に説明させてください。何か問題がある場合は、お気軽に写真を撮ってください~~~
まず、高さと幅を得る方法は、私が知っている限りです。
obj.style.width（height）;
obj.offsetwidth（offseetheight）;
obj.clientwidth（clientheight）;
getComputedStyleおよびCurrentStyle;
obj.naturalwidth（naturalheight）
物語の単純さのために、例としてこれが幅に過ぎません。
最初の方法について説明しましょう：obj.style.width;このメソッドは、スタイル属性を使用して幅がラベルに記述されている場合にのみ値を取得できます。そうしないと、返された値が空になります。次のデモを見てください。
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <script> var imgw = document.getElementsByTagname（ 'img'）[0] .style.width;アラート（IMGW）; //返品値は400pxで、それ以外の場合は空に戻ります。 </script>
上記の方法は、タグのスタイル属性に幅値を追加することにのみ適用されます。インポートされたスタイルシートに幅の値を追加する（HTMLページのリンクまたはスタイルタグからインポートされているかどうか）は、値を取得せず、空です。
次に、2番目の方法と3番目のメソッドobj.offsetwidth（offseetheight）について説明しましょう。 obj.clientwidth（clientheight）;一般的に言えば、ラベルがパディング値と境界値を設定しない場合、2つの取得された値は同じです。しかし、多くの場合、これは当てはまりません。実際、offsetWidthは幅の値 +パディング値 +ボーダー値を取得します。クライアントウィッドは幅値 +パディング値を取得します。次のデモを参照してください。
<style>img{ padding:20px;border:1px solid red;}</style><img src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658"><script>var img = document.getElementsByTagname（ 'img'）[0]、imgoffsetwidth = img.offsetwidth、// 442px imgclientwidth = img.clientwidth; // 440px; </script>取得したIMGタグの幅は、IMGタグに追加されたStyle = "width：400px"です。このプロパティ値が削除された場合、上記のデモのimgoffsetWidthとimgClientWidthによって返される値は、画像自体の高さと幅の値です。あなたはそれを試すことができます。
さらに、getComputedStyleとcurrentStyleは、互換性を処理する2つの方法です。得られた値は、画面に表示される画像の高さと幅の値のみです。 IMGタグのパディングと境界値は取得されません。しかし、getComputedStyleはFirefox/IE9/Safari/Chrome/Operaブラウザーに適しており、CurrentStyleはIE6/7/8に適しています。ただし、IMGタグがスタイル属性を設定しなくてもスタイルシートを導入しない場合、GetComputedStyleのみ、つまり画像自体の高さと幅の値を取得でき、CurrentStyleはAUTOを返します。これがデモです：
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b3051b3051b3051b3051b3051b3051b3051b3051b3051b3c_fw658" " window.getComputedStyle（el、null）[name]; } else {return el.currentstyle [name]; }} var div = document.getElementsByTagname（ 'img'）[0];アラート（getStyle（div、 'width'））; </script>IMGタグのスタイル属性を削除してからテストできます。
最後に、obj.naturalWidth（naturalheight）メソッドがあります。これは、HTML5の要素の高さと幅を取得するために新しく追加された方法ですが、Firefox/IE9/Safari/Chrome/Operaブラウザーにのみ適用できます。各ブラウザのデモは次のとおりです。
<img src = "http://img.hb.aicdn.com/787BF87D05AD774522DD92151B3051B463229A11109598-9QXV9C_FW658" "> <スクリプトgetimgnaturalstyle（img、callback）{var nwidth、nheight if（img.naturalwidth） function（）{callback（image.width、image.height）} return [nwidth、nheight]} document.getelementsbytagname（ 'img'）、imgnatural = getimgnaturalstyle（img）; </script>IE6/7/8ブラウザーImage.SRCでは、IMGイメージが完全にロードされた後にのみ取得されることに注意してください。そうしないと、エラーが報告されます。
画像の完全な読み込みに関しては、前回遭遇した問題が画像の高さを取得できないという問題を解決します。
document.addeventlistener（ "domcontentloaded"、function（）{//私たちのコードはそのような環境で記述されたためです。この時点で、IMGタグはロードされていました。つまり、DOM構造のみがあり、画像は完全に読み込まれていないため、取得された値はすべて0ですが、環境を導入してください。言い換えれば、画像の高さと幅を取得する上記の方法は、画像が完全にロードされているという前提に基づいている必要があります。
さて、私の能力で、私はこれを理解することしかできません。何か問題がある場合は、お気軽に写真を撮ってください~~
IMG写真の高さと幅を取得するJSの上記の簡単な例は、私があなたと共有したすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。