Question

我有以下代码来更改元素的样式，一旦我进入页面，警告窗口将显示，使用＆＃34; myP＆＃34;信息;无论如何，风格不会被添加到元素。另外，如果你有基于jQuery的解决方案，请告诉我。

<!DOCTYPE html>
<html>
 <body>
    <script type="text/javascript">
         alert("myP");
         document.getElementById("myP").style.fontWeight = "bold";
    </script>

    ...
    <a id="myP" href="www.example.com">Example</a>
    ...

    </body>

</html>

Answer 1

根据OP jQuery的要求，等待DOM加载的解决方案将是

$(document).ready(function(){
    alert("myP");
    $("#myP").css("font-weight", "bold")
});

Answer 2

您的脚本将在加载元素之前运行。您需要将其包装在函数中并在文档加载时调用它。

Answer 3

脚本无法找到您的元素，因为当您在其上调用getElementById时它不会被加载，因此在关闭body标记之前移动脚本代码，如下所示：

<!DOCTYPE html>
<html>
 <body>      

    ...
    <a id="myP" href="www.example.com">Example</a>
    ...
    <script type="text/javascript">
         alert("myP");
         document.getElementById("myP").style.fontWeight = "bold";
    </script>
    </body>

</html>

演示:: jsFiddle

Answer 4

这是因为在执行JS代码时没有加载文档。

将javascript代码包含到 window.onload 函数中，如下所示

 window.onload = function(){
     alert("myP");
     document.getElementById("myP").style.fontWeight = "bold";
 }

注意： - 养成查看控制台的习惯。

无法在运行时向元素添加CSS样式

4 个答案: