Javascript 为什么我的页面加载没有任何css？_Javascript_Html_Css

Javascript 为什么我的页面加载没有任何css？

javascript html css

Javascript 为什么我的页面加载没有任何css？,javascript,html,css,Javascript,Html,Css,所以这个问题困扰了我好几天了。我一直在尝试在我的网站上设置一个工作的夜间模式开关。在我认为是解决方案之前和之后，我都在这里问过，使用这个站点和stack exchange的帮助，我开始遇到一个恼人的问题以下是我的问题的视频：只有在启用了nightmode时才会出现问题，我不明白实际的问题是什么。我尝试过各种不同的JavaScript代码，每次都有相同的结果。另外，在有人说这是因为DOMContentLoaded位之前，我已经尝试过在我的按钮上添加EventListeners时使用它来删除它

所以这个问题困扰了我好几天了。我一直在尝试在我的网站上设置一个工作的夜间模式开关。在我认为是解决方案之前和之后，我都在这里问过，使用这个站点和stack exchange的帮助，我开始遇到一个恼人的问题

以下是我的问题的视频：

只有在启用了nightmode时才会出现问题，我不明白实际的问题是什么。我尝试过各种不同的JavaScript代码，每次都有相同的结果。另外，在有人说这是因为DOMContentLoaded位之前，我已经尝试过在我的按钮上添加EventListeners时使用它来删除它

我还尝试用一些不同的方法来改变getCookie（）的工作方式

饼干是正确的方法还是有更好的方法

以下是我的HTML的基本内容：

<!DOCTYPE html>


<html lang="en">

    <head>

    <meta charset="utf-8"/>

  <title>Ryan Simms</title>

<link id ="pageStyle" rel="stylesheet" href='css/lightStyle.css' type='text/css'>
<script src="scripts/lightSwitch.js"></script>
<script src="scripts/cookie.js"></script>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css'>


    </head>

    <body>
    <script src="lightSwitch.js"></script> <!-- Loads LightSwitch Script -->

  <button type="button" id="lightSwitchOn">Turn On Night Mode</button>
  <button type="button" id="lightSwitchOff">Turn Off Night Mode</button>

    </body>

</html>

以下是我的默认CSS：

/*Layout for phones and tablets e.g. iPhone 5 and iPad*/

    /*webpage fades in*/
    html {
        animation: fadein 2s;
        position: relative;
        min-height: 100%;
    }

    /*animation*/
    @keyframes fadein {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /*main colour settings for page*/
    body {
        font-family: 'Roboto';
        font-size: 22px;
        color: #1C1C1C;
        background-color: #FFF;
        margin: 0 0 100px;
        padding: 25px;
    }

    /*List in nav*/
    li {
        list-style-type: none;
        display: inline;
    }

    /*Navigation*/
    nav {
        width: 100%;
        background-color: #D8D8D8;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    ol {
        text-align: center;
        margin-right: 10px;
    }

    /*Links*/
    a, a:link, a:visited, a:hover {
        color: #1C1C1C;
        text-decoration: none;
    }

    /*Main heading*/
    h1 {
        position: relative;
        margin: 0 auto;
        text-align: center;
    }

    /*Images*/
    img {
        border: solid 0px #1C1C1C;
        border-radius: 5px;
        margin: 0 auto;
        text-align: center;
    }

    label {
        display: block;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    textarea {
        width: 300px;
        height: 200px;
        margin-bottom: 10px;
        padding: 10px;
        border: solid 1px #1C1C1C;
        border-radius: 2px;
        resize: none;
    }

    input {
        border: solid 1px #1C1C1C;
        border-radius: 2px;
        padding: 5px;
    }

    #logo {
        border: 0px;
        display: inline;
        position: absolute;
        top: 40px;
        left: 30px;
        margin-left: 10px;
        font-size: 40px;
    }

    #enter {
        margin-top: 40px;
        max-width: 90%;
        max-height: 90%;
    }

    video {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }

    /*Footer*/
    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        overflow: hidden;
        text-align: center;
    }

    /*Main Body*/
    #mainContent {
        padding: 10px;
        background-color: #D8D8D8;
        margin-top: 10px;
    }

    #mainContent img {
        display: inline;
        max-width: 375px;
        max-height: 375px;
        float: right;
        margin-right: 10px;
        margin-left: 10px;
    }

    /*Light Switches*/
    #lightSwitchOn {
        display: inline;
        position: absolute;
        top: 40px;
        right: 30px;
        margin-right: 10px;
        font-size: 40px;
    }

    #lightSwitchOff {
        display: none;
        position: absolute;
        top: 40px;
        right: 30px;
        margin-right: 10px;
        font-size: 40px;
    }

    #cookies {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 8%;
        width: 100%;
        background-color: #D8D8D8;
        padding-left: 30px;
    }

/*Layout for device with a min-width of 1024px*/
@media only screen and (min-width: 1024px) {

    #enter {
        max-width: 60%;
        max-height: 60%;
    }
}

/*Layout for desktop with a min-width of 1280px (720p HD)*/
@media only screen and (min-width: 1280px) {

    #enter {
        max-width: 40%;
        max-height: 40%;
    }
}

/*Layout for desktop with a min-width of 1920px (1080p HD)*/
@media only screen and (min-width: 1920px) {

    #enter {
        max-width: 40%;
        max-height: 40%;
    }
}

和启用夜间模式时的我的CSS：

/*Layout for phones and tablets e.g. iPhone 5 and iPad*/

    /*webpage fades in*/
    html {
        animation: fadein 2s;
        position: relative;
        min-height: 100%;
    }

    /*animation*/
    @keyframes fadein {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /*main colour settings for page*/
    body {
        font-family: 'Roboto';
        font-size: 22px;
        color: #FFF;
        background-color: black;
        margin: 0 0 100px;
        padding: 25px;
    }

    /*List in nav*/
    li {
        list-style-type: none;
        display: inline;
    }

    /*Navigation*/
    nav {
        width: 100%;
        background-color: #1C1C1C;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    ol {
        text-align: center;
        margin-right: 10px;
    }

    /*Links*/
    a, a:link, a:visited, a:hover {
        color: #FFF;
        text-decoration: none;
    }

    /*Main heading*/
    h1 {
        position: relative;
        margin: 0 auto;
        text-align: center;
    }

    /*Images*/
    img {
        max-width: 100%;
        max-height: 100%;
        border: solid 0px #FFF;
        border-radius: 5px;
        margin: 0 auto;
        text-align: center;
    }

    label {
        display: block;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    textarea {
        max-width: 100%;
        max-height: 100%;
        width: 300px;
        height: 200px;
        margin-bottom: 10px;
        padding: 10px;
        border: solid 1px #FFF;
        border-radius: 2px;
        resize: none;
    }

    input {
        border: solid 1px #FFF;
        border-radius: 2px;
        padding: 5px;
    }

    #logo {
        border: 0px;
        display: inline;
        position: absolute;
        top: 40px;
        left: 30px;
        margin-left: 10px;
        font-size: 40px;
    }

    #enter {
        margin-top: 40px;
        max-width: 90%;
        max-height: 90%;
    }

    video {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }

    /*Footer*/
    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        overflow: hidden;
        text-align: center;
    }

    /*Main Body*/
    #mainContent {
        padding: 10px;
        background-color: #1C1C1C;
        margin-top: 10px;
    }

    #mainContent img {
        display: inline;
        max-width: 375px;
        max-height: 375px;
        float: right;
        margin-right: 10px;
        margin-left: 10px;
    }

    /*Light Switches*/
    #lightSwitchOn {
        display: none;
        position: absolute;
        top: 40px;
        right: 30px;
        margin-right: 10px;
        font-size: 20px;
    }

    #lightSwitchOff {
        display: inline;
        position: absolute;
        top: 40px;
        right: 30px;
        margin-right: 10px;
        font-size: 20px;
    }

    #cookies {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 8%;
        width: 100%;
        background-color: #1C1C1C;
        padding-left: 30px;
    }

/*Layout for device with a min-width of 1024px*/
@media only screen and (min-width: 1024px) {

    #enter {
        max-width: 60%;
        max-height: 60%;
    }
}

/*Layout for desktop with a min-width of 1280px (720p HD)*/
@media only screen and (min-width: 1280px) {

    #enter {
        max-width: 40%;
        max-height: 40%;
    }
}

/*Layout for desktop with a min-width of 1920px (1080p HD)*/
@media only screen and (min-width: 1920px) {

    #enter {
        max-width: 40%;
        max-height: 40%;
    }

}

饼干是正确的方法还是有更好的方法

因为您不关心服务器端的cookie，所以选择。您可以用以下内容替换所有cookie代码

localStorage.setItem('lights', 'off');

if(localStorage.getItem('lights') === 'off') { ... }

<> >不要加载新的样式表用于夜间模式，考虑添加<代码> >“黑暗< /代码>类”到“<代码>正文> /代码>如果夜间模式已打开，并在主样式表中加入适当的更改。

正文{
字体系列：“Roboto”；
字体大小：22px；
颜色：#1c1c；
背景色：#FFF；
利润率：0.100px；
填充：25px；
}
身体黑{
颜色：#FFF；
背景色：黑色；
}
/*航行*/
导航{
宽度：100%；
背景色：#D8D8D8；
填充顶部：10px；
垫底：10px；
}
.暗导航{
背景色：#1c1c；
}

您可能不想在视频中显示您的家庭地址和电话号码？它在我的个人网站上，我同意，这意味着在23.5分钟后，你会在家门口被销售电话和文字炸弹轰炸，因为你在网上泄露了你的个人信息。这已经持续了好几个星期了，我一个也没有，任何我不认识的数字我都不会回答，最终会阻止。另一种解决方案是使用Less.js在浏览器端编译较少的样式表，这样您就可以将新变量值传递给Less文件以更改颜色。如果您对此感兴趣，请访问Less.js，他们提供了非常好的指南。我认为这可能有效，我之前尝试过使用本地存储，但不太熟悉，也感谢您提供的提示，我会查看它！

localStorage.setItem('lights', 'off');

if(localStorage.getItem('lights') === 'off') { ... }