4

HTML ドキュメントに複数の画像があります。max-widthこれらの要素の幅は、すべての要素に適用される CSS プロパティによって変更されることがよくあります。

.jpeg/.png/.whatever 画像ファイルの実際の幅と、ユーザーに表示されている幅の両方を取得できるかどうかを知りたいです。これは、画像がmax-width プロパティによってサイズが変更されているかどうか。

を使用する代わりに、ページが読み込まれた後に JavaScript を使用して画像のサイズを変更することmax-widthは認められません。

4

2 に答える 2

0 

window.addEventListener("load", function() {
  var imgs = document.querySelectorAll('img');
  for (var i = 0; i < imgs.length; i++) {
    var imgTag = imgs[i];
    var image = new Image();
    image.src = imgTag.src;
    output.innerHTML = "Width: " + image.width + " Height: " + image.height;
  }
});
img {
  max-width: 200px;
}
<img src="http://www.google.com/images/srpr/logo11w.png"/>
<p id="output"></p>

これをまとめただけで、うまくいくように見えました。

JavaScript のImage種類によって異なります。また、DOMContentLoaded ではなく「onload」を使用したので、画像についてクエリを実行するときに、画像が既に読み込まれており、onLoad コールバックを待つ必要がないことを確認できます。

于 2014-10-08T20:15:47.130 に答える