Question

我正在学习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>

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

<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>

我正在打破这个问题。代码是相同的，顶部（不工作）是我写的 - 底部来自一本书。我错过了什么？

Answer 1

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

更改此行：

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等。

jsFiddle / Full Screen Result

Answer 2

问题在于DOCTYPE

<!DOCTYPE html>

这会将您的文档置于标准模式。添加此css：

html
{
height: 100%
}
body
{
height: 100%
}

在语句末尾添加"px"将解决问题，因为在标准模式下，您需要明确说明单位。或者，您可以删除<!DOCTYPE html>

为什么我的图像高度不变？

2 个答案: