JavaScript 更改元素的样式 - 获取错误 - JavaScript changing style of element

我正在尝试使用 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 的新手，如果我做错了什么，很抱歉，但对我来说一切似乎都很好。我可能犯了一些愚蠢的错误。

您的 JavaScript 代码在创建带有 p 标签的document之前执行。
要解决此问题，请将代码放在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"元素的底部可以提高显示速度，因为脚本编译可能会减慢显示速度。

像

这样将其包装在事件侦听器中

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

因此，当元素可用时，您可以使用它。当前元素不可用，因为它尝试在页面加载之前获取元素。所以要运行代码当元素可用时，像上面一样包装它。

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

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

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

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

相关内容

最新更新

热门标签：