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

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

javascript html

JavaScript更改元素样式-获取错误,javascript,html,Javascript,Html,我试图通过使用JavaScript更改元素的样式，但是，当我尝试：test.html:4未捕获的类型错误：无法在测试时读取null的属性“style”。html:4 这是我的代码： <html> <head> <script type="text/javascript"> document.getElementById("test").style.marginTop="20px"; </script> </head> &

我试图通过使用JavaScript更改元素的样式，但是，当我尝试：

test.html:4未捕获的类型错误：无法在测试时读取null的属性“style”。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>


document.getElementById（“test”）.style.marginTop=“20px”；

这是一个测试

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

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

这里的问题是，脚本在页面上带有

id=“test”

的

div

之前执行。您可以将代码移动到页面底部，或者在加载窗口时添加事件侦听器，如下所示：

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


addEventListener（'load'，function（））{
document.getElementById（“test”）.style.marginTop=“20px”；
});

将其包装在事件侦听器中，如下所示

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

所以当元素可用时，您可以使用它。当前元素不可用，因为它试图在页面加载之前获取元素。所以要运行代码

当元素可用时，按上述方式包装它。

在创建带有

标记的

文档之前执行JavaScript代码。

要修复此问题，请将代码放在正文
标记的底部或文档加载完成事件中
<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>



这是一个测试

document.getElementById（“test”）.style.marginTop=“20px”；

此外，将脚本放在“body”元素的底部可以提高显示速度，因为脚本编译可能会降低显示速度。
这是最好的答案，但您需要将脚本标记放在body结束标记之前。脚本可能重复