Javascript 为什么我的图像高度没有改变？_Javascript

Javascript 为什么我的图像高度没有改变？

javascript

Javascript 为什么我的图像高度没有改变？,javascript,Javascript,我正在学习JavaScript并使用以下代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>javascript learning</title> <script type="text/javascript">

我正在学习JavaScript并使用以下代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>javascript learning</title>
    <script type="text/javascript">
        function resizeRock() {
            document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
        }

    </script>
</head>
<body onload="resizeRock();">
    <!--ROCK-->
    <div id="image">
        <img src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" id="rockImage" onclick="touchRock();" style="cursor: pointer;" />
    </div>



</body>
</html>


javascript学习
函数resitzerock（）{
document.getElementById（“rockImage”）.style.height=（document.body.clientHeight-100）*0.5；
}

此代码未调整图像大小，但以下代码按预期工作：

<html>
  <head>
    <title>iRock - The Virtual Pet Rock</title>

    <script type="text/javascript">

      function resizeRock() {
        document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
      }


    </script>
  </head>

  <body onload="resizeRock();">
    <div style="margin-top:100px; text-align:center">
      <img id="rockImage" src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
    </div>
  </body>
</html>


iRock-虚拟宠物摇滚
函数resitzerock（）{
document.getElementById（“rockImage”）.style.height=（document.body.clientHeight-100）*0.5；
}

我为这件事伤了脑筋。代码是一样的，顶部（不工作）是我写的-底部是一本书。我缺少什么？

你需要给你的风格一个单位

更改此行：

document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;

为此：

document.getElementById("rockImage").style.height = ((document.body.clientHeight - 100) * 0.5) + 'px';

这将告诉浏览器您正在以px为单位设置高度，而不是百分比、pt、em等

问题在于DOCTYPE

<!DOCTYPE html>

在语句末尾添加

“px”

将解决此问题，因为在标准模式下，您需要明确说明该单元。

或者，您可以删除正在调整div大小的

。为什么您希望img的大小发生变化？@Juhana他没有调整div大小。

document.getElementById（“rockImage”）.style.height

将更改岩石的高度，而不是div。这可能会起作用：更改

document.getElementById（“rockImage”）.style.height=（document.body.clientHeight-100）*0.5；

document.getElementById（“rockImage”）.style.height=*（document.body.clientHeight-100）*0.5）+“px”。这会给你的号码一个单位。@JoshuaDwire啊，我明白了。（图像的id在第一个代码中不可见。）但我不知道你的代码与书中的代码有什么不同。也许这本书的代码也不起作用？
html
{
height: 100%
}
body
{
height: 100%
}