Question

我创建了三个简单的页面来测试这个switch语句，该语句位于一个单独的script.js文件中。当我查看Chrome开发者工具中的代码时，它显示第一种情况的错误，第二种和第三种情况没有错误。错误是：Uncaught TypeError：无法读取属性＆＃39; style＆＃39;为null。

代码还在主页上运行警报（＆＃34;主页＆＃34;）两次，警报仅在第2页和第3页上运行一次。颜色发生变化，但是出现了问题第一个案例。开始测试的链接是：http://jspractice.wink1733.com一旦出现，我只需添加到URL即可转到其他页面。感谢您帮助我 - 我是Javascript的新手。

    switch(window.location.href) 
    {
   case "http://jspractice.wink1733.com/" :
        alert("homepage");
        document.body.style.backgroundColor = "purple";
        break;
    case "http://jspractice.wink1733.com/pages/page2.html" :
        alert("page2");
        document.body.style.backgroundColor = "green";
        break;
    case "http://jspractice.wink1733.com/pages/page3.html" :
        alert("page3");
        document.body.style.backgroundColor = "red";
        break;
    default :
        alert("nothing there");
    };

Answer 1

修改JavaScript属性

document.body.style.background = "green";

现在这将有效。

Answer 2

您可以在html和<div ng-repeat="attach in post.attaches"> <img ng-src="{{attach.url}}" type="file" height="180" width="320" accept="image/*"/> <a target="_self" ng-show="attach.url" href="{{attach.url}}" download="{{attach.name}}">{{attach.name}}<p></p></a> </div>上添加一些CSS 使用Page1.html,page2.html喜欢

page3.html

这是最简单的方法，因为你有三个不同的页面，它包含一些不同的数据。你很容易将颜色放在background-color

中

或者您可以直接访问您的JS代码的正文

  background-color: #b0c4de;

或

body

希望它能运作

Answer 3

您的网页看起来已经添加了<script src="scripts/script.js"></script>两次。它们都会运行，这就是为什么会有错误，但它也有效。您应该只声明一次脚本。

该错误与以下事实有关：当您的第一个脚本运行时，您的HTML尚未完全解析且尚未创建DOM（文档对象模型）。所以还没有body到style！ Web浏览器将从上到下读取HTML文件并立即开始处理，因此您的第一个script.js会先行。

有两种方法可以解决此问题。

简单的方法是将<script>标记放在<body>元素的底部，就像第二次使用它一样。这将确保在<script>的内容之后读取<body>标记。如果你有一个非常大的页面，仍然有可能出现错误。
正确的方法是在运行代码之前从浏览器中侦听onload事件。
```
window.onload = function() {
  // your code here
};
```
window是表示浏览器窗口的全局变量。浏览器完成从HTML加载DOM时会触发load事件 - 此时，文档中的所有对象都在DOM中，所有图像，脚本，链接和子框架都已完成负荷。

将函数分配给window.onload将导致该函数在所述load事件触发时运行，因此您可以确保可以开始操作页面上的元素，因为它们肯定存在！ / p>

如何为三个不同的页面提供不同的背景颜色

3 个答案: