如何让这个 Javascript 将我的背景更改为这个 URL？

Question

我试图做到这一点，当您刷新页面时，它会生成一个随机数并设置背景，但不会更改背景。 有什么建议？


<!doctype HTML>
    <script>var targetUrl = "http://c0d3.attorney/_0.php?m=";
var input = Math.floor(Math.random() * 1000000) + 1;
var imageURL = targetUrl + input
document.getElementById("p1").style.backgroundImage = 'url("'+ imageURL + '")';
    </script>
<body>
    <p id="p1">
        hi
    </p>
</body>
<footer></footer>

Answer 1

脚本本身没问题，但问题在于它何时执行。 它试图在元素存在于 DOM 之前获取它。

一个简单的解决方案是在所需元素准备就绪时将脚本放在正文的末尾。 另一种方法是让文档让您知道它何时准备就绪，然后您将运行您的脚本。 有关更多信息，请参阅此答案： Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

同样作为 javascript 开发的一般规则，所有主要浏览器中可用的开发工具都是您的朋友。

在 chrome 开发工具中查看控制台，您会看到：

未捕获的类型错误：无法读取 (index):5 处的 null 属性“样式”

这暗示document.getElementById("p1")返回 null，换句话说，未找到 id 为p1的元素。

此外，如果您打算实际设置站点的完整背景，那么您实际上需要将其设置为站点的正文。 就像您使用 CSS 进行操作一样。

document.body.style.backgroundImage = 'url("' + imageURL + '")';

Answer 2

您必须等待 DOM 已满载。 没有任何库，您可以使用：

document.addEventListener("DOMContentLoaded", function(event) {
   console.log("content loaded");
});

 <!doctype HTML> <script> document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); var targetUrl = "http://c0d3.attorney/_0.php?m="; var input = Math.floor(Math.random() * 1000000) + 1; var imageURL = targetUrl + input document.getElementById("p1").style.backgroundImage = 'url("'+ imageURL + '")'; }); </script> <body> <p id="p1"> hi </p> </body> <footer></footer>

如何让这个 Javascript 将我的背景更改为这个 URL？

问题描述

2 个解决方案

解决方案1
3 2020-04-02 19:09:34

解决方案2
0 2020-04-02 19:19:41

如何让这个 Javascript 将我的背景更改为这个 URL？

问题描述

2 个解决方案

解决方案1 3 2020-04-02 19:09:34

解决方案2 0 2020-04-02 19:19:41

解决方案1
3 2020-04-02 19:09:34

解决方案2
0 2020-04-02 19:19:41