Question

这对你们来说可能很简单，我正在学习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>

道歉，忘记提到那是行不通的！在多个浏览器中加载页面后，图像保持原始大小，错误控制台说它们无法解析高度值。声明被撤销。

我尝试了很多不同的方法，但似乎无法让它发挥作用。

Answer 1

(document.body.clientWidth) * 0.2会给你一个整数。 CSS height属性接受length。

添加一些单位。

Answer 2

http://jsbin.com/uyihe4

有一个实例

加载时可以看到缩放效果。我只改变了

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

到

document.getElementById("sampleImage").height

Answer 3

嗯，您的问题是，当您将样式应用于图像时，图像可能尚未就绪。

改为使用此函数（注意它需要一个DOM对象）：

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

Answer 4

虽然我还没弄清楚问题。但以下代码片段适用于我（在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 onload事件调整图像帮助

4 个答案: