3

そこで、div の背景画像の実際のサイズを取得したいと思い、サイトを検索すると、次の URL にすばらしい JavaScript コードが見つかりました: http://jsbin.com/olozu/2/edit。

ただし、コードは上記と同じですが、私のサイトでは機能していないようで、その理由がわかりません。

これが私のコードです（JS Bin）

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body onclick="picture()">
  <img id="topicinfo" src="http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg"><
</body>
</html>

JavaScript:

function picture()
{
  var a=document.getElementById("topicinfo").height;
  alert(a);
}

左の画像をクリックすると、幅0高さ0と表示されます。

4

1 に答える 1

0

属性から情報を取得しようとしていstyleますが、画像の背景をインラインで宣言していないため、stylenull です。計算されたスタイルを取得する必要があります。こちらのスレッドを参照してください。一番上の答えは包括的な説明を提供します。

JavaScript を使用して要素の CSS プロパティを読み取る

別の優れたリソース:

http://javascript.info/tutorial/styles-and-classes-getcomputedstyle#getcomputedstyle-and-currentstyle

編集:より具体的には、あなたがしなければならないことはこれです:

var imageUrl = getComputedStyle(document.getElementById('topicinfo'));
var imageSrc = imageUrl.replace(/"/g,"")
                       .replace(/url\(|\)$/ig, "");

ただし、これらのリソースは、この種のアクションを簡単に繰り返し可能にする関数を実装する優れた方法を提供するため、これらのリソースを確認することをお勧めします。

于 2012-12-04T23:17:13.997 に答える