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.