Javascript onloadイベントでイメージのサイズを変更するhelp

これはあなたのための簡単なものです.Javascriptを学んでいて、問題が発生しました。私はonloadイベントがそうのように呼び出されたときにスクリプトがページ上の特定の画像をリサイズ持つようにしようとしています：Javascript onloadイベントでイメージのサイズを変更するhelp

<script type="text/javascript"> 

function resizeSampleImage() 
{ 
    document.getElementById("sampleImage").style.height = (document.body.clientWidth) * 0.2; 
} 

    </script>

...

<body onload = "resizeSampleImage();" >

...

<a href="http://www.buildingpeople.uk.com" target="_blank"> <img id="sampleImage" src="Images/BP snip.jpg" alt="BuildingPeople.uk.com" /> </a>

謝罪、それは動作していないことを忘れてしまった！複数のブラウザでページを読み込んだ後も、イメージは元のサイズのままであり、エラーコンソールは高さの値を解析できないと言っています。宣言が落ちた。

私はさまざまな方法を試しましたが、うまくいかないようです。

出典

2010-12-18 Paul Chambers

あなたはおそらく問題が何であるかを言及する必要があります！ –

ありがとうございます。いい視点ね！私はこれを今追加しました。 –

-1

に

document.getElementById("sampleImage").style.height

を変更しました。しかし、次のコードスニペットは私のために働きます（Chrome 8.0とIE9.0Betaでテスト済み）。

<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      function resizeSampleImage() 
      { 
       document.getElementById("sampleImage").style.height = (document.body.clientWidth) * 0.5; 
      } 
     </script> 
    </head> 
    <body onload="resizeSampleImage();"> 
     <img id="sampleImage" src="http://news.mydrivers.com/Img/20101217/S03405153.jpg"> 
    </body> 
</html>

出典

2010-12-18 15:31:45 Sefler

奇妙なことに、私は上記のコードをコピーして貼り付け、自分のイメージをスワップするとうまくいきます！ –

Okページの上部にdoctype宣言を削除するとうまくいきます！ –

これは、Quirksモードに入ったためです。これにより、ブラウザは古代のブラウザのバグをエミュレートします。これらのバグの1つは、CSSのピクセル長として整数を扱うことです。それらはまた非常に矛盾するようになる。 ** Quirksモードは望ましくない** – Quentin

(document.body.clientWidth) * 0.2は整数になります。 CSS heightプロパティはlengthを受け入れます。

いくつかのユニットを追加します。

出典

2010-12-18 15:20:48 Quentin

（document.body.clientWidth）は長さを返しませんか？私はそれらの20％を計算しようとしています。 –

いいえ、整数を返します。長さが返された場合は、0.2を掛けると 'NaN'（これも長さではありません）が出力されます。 – Quentin

文をdocument.getElementById（" sampleImage "）に変更すると、style.height = 500px;それでも間違っていますか？私は助けを感謝する方法で時間をいただきありがとうございます。 –

ロード時にズーム効果を見ることができますhttp://jsbin.com/uyihe4

でのライブの例があります。私は問題を把握していないけど、私は唯一の

document.getElementById("sampleImage").height

出典

2010-12-18 15:30:24 Kevin

問題は、スタイルを適用したときに画像が準備できていないことです。

（それはDOMオブジェクトを受け取りに注意してください）の代わりに、この機能を使用します。

var imgLoader = function(domImg) { 
    var imgObj = new Image(); 
    imgObj.onload = function() 
    { 
    // apply styles 
    domImg.style.height = "100px"; 
    } 
    imgObj.src = domImg.src; 
}

出典

2011-03-08 13:22:40

Javascript onloadイベントでイメージのサイズを変更するhelp

答えて

関連する問題