Javascript onload事件以調整圖像大小幫助
[英]Javascript onload event to resize image help
問題描述
對於您來說，這可能是一個簡單的過程，我正在學習Java腳本並遇到了問題。 我試圖在調用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>
道歉，忘了說那是行不通的！ 在多個瀏覽器中加載頁面后，圖像將保持其原始大小，並且錯誤控制台表示它們無法解析高度值。 聲明被放棄。
我嘗試了許多不同的方法，但似乎無法使其正常工作。
4 個解決方案
解決方案1
0 2010-12-18 15:20:48
(document.body.clientWidth) * 0.2將為您提供一個整數。 CSS height屬性接受一個length 。
添加一些單位。
解決方案2
0 2010-12-18 15:30:24
http://jsbin.com/uyihe4有一個實時示例
加載時可以看到縮放效果。 我只改變了
document.getElementById("sampleImage").style.height
至
document.getElementById("sampleImage").height
解決方案3
0 2011-03-08 13:22:40
好吧，您的問題是，將樣式應用於圖像時，圖像可能尚未准備就緒。
請改用此函數（注意，它需要一個DOM對象）：
var imgLoader = function(domImg) {
var imgObj = new Image();
imgObj.onload = function()
{
// apply styles
domImg.style.height = "100px";
}
imgObj.src = domImg.src;
}
解決方案4
-1 已采納 2010-12-18 15:31:45
雖然我還沒有找出問題所在。 但是以下代碼段對我有用（在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>
Javascript Image OnLoad事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.