Javascript onload事件來調整圖像幫助

這可能是一個簡單的，你們，即時通訊學習Javascript和碰到問題。我想有腳本調整頁面上的特定圖像的onload時調用，像這樣：Javascript onload事件來調整圖像幫助

<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

你或許應該提到的問題是什麼！ – 2010-12-18 14:55:52

謝謝。好點子！我現在加了這個。 – 2010-12-18 15:18:03

-1

雖然我還沒有搞清楚的問題。但是下面的代碼片段適用於我（在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

奇怪的是，當我複製並粘貼上面的代碼，並將圖像交換到我自己的作品！ – 2010-12-18 15:39:26

好的，當我刪除頁面頂部的doctype聲明它工作！ – 2010-12-18 15:59:03

這是因爲你已經進入怪癖模式。這會導致瀏覽器模仿古代瀏覽器的錯誤。其中一個錯誤是將整數視爲CSS中的像素長度。他們也變得高度不一致。 **怪癖模式是不可取的** – Quentin 2010-12-18 16:25:23

(document.body.clientWidth) * 0.2會給你一個整數。 CSS height住宅接受length。

添加一些單位。

來源

2010-12-18 15:20:48 Quentin

不（document.body.clientWidth）返回一個長度？我只是試圖計算這個的20％。 – 2010-12-18 15:22:59

不，它返回一個整數。如果返回一個長度，則將其乘以0.2會輸出'NaN'（也不是長度） – Quentin 2010-12-18 15:24:13

將語句更改爲document.getElementById（「sampleImage」）。style.height = 500px;仍然不工作，這也錯了？感謝你的時間，我感謝你的幫助。 – 2010-12-18 15:28:00

有一個在http://jsbin.com/uyihe4

一個活生生的例子加載時，您可以看到變焦效果。我只是改變了

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

到

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事件來調整圖像幫助

回答

相關問題