Question

我正在尝试使用JavaScript更改元素的样式，但是，当我尝试：test.html:4 Uncaught TypeError: Cannot read property 'style' of null at test.html:4

时，我收到此错误

这是我的代码：

<html>
<head>
  <script type="text/javascript">
    document.getElementById("test").style.marginTop="20px";
  </script>
</head>
<body>
  <p id="test">
    this is a test
  </p>
</body>
</html>

我是JavaScript的新手，很抱歉，如果我做的事情完全出错了，但对我来说一切都很好。我可能会犯一些愚蠢的错误。

Answer 1

您的JavaScript代码在document创建p标记之前执行要解决这个问题，请将代码放在body标记的底部或文档加载完成事件中。

<html>
  <head>
  </head>
  <body>
    <p id="test">
      this is a test
    </p>
    <script type="text/javascript">
      document.getElementById("test").style.marginTop="20px";
    </script>
  </body>
</html>

此外，将脚本放在“body”元素的底部可以提高显示速度，因为脚本编译可能会降低显示速度。

Answer 2

这是一个运行时错误。您的JavaScript试图访问在执行语句时尚不存在的元素。将JavaScript代码块移动到文档的底部。

Answer 3

此处的问题是脚本在页面上div id="test"之前执行。您可以将代码移动到页面底部，也可以在窗口加载时添加事件监听器，如下所示：

<script type="text/javascript">
    window.addEventListener('load', function(){
        document.getElementById("test").style.marginTop="20px";
    });
</script>

Answer 4

将它包装在像这样的事件监听器中

window.onload = function(event){
  document.getElementById("test").style.marginTop="20px";
}

所以当元素可用时你可以使用它。目前元素不可用，因为它在页面加载之前尝试获取元素。所以要运行代码当元素可用时将其包裹起来，如上所述。

JavaScript改变元素的样式 - 获取错误

4 个答案: