Question

我的脚本不会运行或者是document.getElementById（“toMove”）;似乎没有抓住元素。它非常基本的JavaScript，但我不明白为什么它不工作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
    #toMove
    {
        background-color:lightblue;
        position:absolute;
    }
    </style>
        <script>
        var elem = document.getElementById("toMove");
        elem.style.margin = "600px";
    </script>   
</head>
    <body>  
<div id="toMove" style="margin:200px; font-size:26px;"> Hello World</div> 
    </body>

由于

Answer 1

正确关闭标签。问题是，当你的脚本执行时，你的元素toMove在DOM中不存在

将您的代码包裹在window.onload中。该函数在页面加载完成后执行JavaScript。

 window.onload = function(){
    var elem = document.getElementById("toMove");
    elem.style.margin = "600px";
 }

OR ，只需在HTML声明后编写脚本

Answer 2

问题是这个脚本必须在DOM准备就绪后运行（浏览器中呈现的所有元素）包装脚本如下所述：

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

或者如果你使用jquery

$('document').ready(function(){});

Answer 3

您必须正确关闭头标记。

</head>

还要做Satpal的代码。

Answer 4

这会奏效。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style>
        #toMove
        {
            background-color:lightblue;
            position:absolute;
        }
        </style>

    </head
        <body>  
    <div id="toMove" style="margin:200px; font-size:26px;"> Hello World</div> 
        </body> 
         <script>
             var elem = document.getElementById("toMove");
              elem.style.margin = "500px";
        </script>  
        </html>

Answer 5

有几个原因导致它不能正常工作

您需要正确关闭<head>代码
脚本运行的时间点，DOM（文档对象模型）中尚不存在标识为toMove的元素

解决数字1应该很简单，只需将</head更改为</head>即可。要解决数字2，您需要确保在DOM中存在标识为toMove的元素后触发脚本。您可以通过将窗口连接到窗口加载时触发来执行此操作。下面的代码设置了一个在窗口加载完毕后触发的函数

window.onload = function(){
   var elem = document.getElementById("toMove");
   elem.style.margin = "600px";
}

使用javascript修改Div元素

5 个答案: