Fatal编程技术网
  • javascript/
  • Javascript 交换样式表&x2B；本地存储

Javascript 交换样式表&x2B；本地存储

javascript css

Javascript 交换样式表&x2B；本地存储,javascript,css,Javascript,Css,我是一名摄影师，对HTML/CSS了解有限，对javascript几乎一无所知。我正试图建立自己的网站，我想有一个选择，在光明/黑暗的背景之间切换，以更好地观看我的照片时的观看体验。我找到了一个在CSS（亮/暗）之间交换的代码 标题HTML: <link rel="stylesheet" id="pagestyle" type="text/css" href="CSS/light.css" > <link rel="alternate stylesheet" tittle="d

我是一名摄影师，对HTML/CSS了解有限，对javascript几乎一无所知。我正试图建立自己的网站，我想有一个选择，在光明/黑暗的背景之间切换，以更好地观看我的照片时的观看体验。我找到了一个在CSS（亮/暗）之间交换的代码

标题HTML:

<link rel="stylesheet" id="pagestyle" type="text/css" href="CSS/light.css" >
<link rel="alternate stylesheet" tittle="dark" type="text/css" href="CSS/dark.css" >
<script src="scripts/styleswitcher.js" type="text/javascript"></script>
正文HTML:

<button id="light"> Light </button>
<button id="dark"> Dark </button>

灯光
黑暗的
我正在尝试使用找到的javascript代码。Javascript:

var setdark = function () {
        $('#head').append('<link rel="stylesheet" href="CSS/dark.css" type="text/css" />');
    },
    setlight = function () {
        $('link[rel=stylesheet][href="CSS/dark.css type="text/css"]').remove();
    };

$("#light").click(function () {
    localStorage.setItem('color', 'light');
    setlight();
});

$("#dark").click(function () {
    localStorage.setItem('color', 'dark');
    setdark();
});

if (localStorage.getItem('color') == 'light') {
    setlight(); 
} 

else if (localStorage.getItem('color') == 'dark') {
    setdark();
}

var setdark=函数（）{
$（'#head'）。附加（''）；
},
setlight=函数（）{
$（'link[rel=stylesheet][href=“CSS/dark.CSS type=“text/CSS”]”）。删除（）；
};
$（“#灯光”）。单击（功能（）{
setItem（'color'，'light'）；
setlight（）；
});
$（“#暗”）。单击（函数（）{
setItem（'color'，'dark'）；
setdark（）；
});
if（localStorage.getItem（'color'）=='light'）{
setlight（）；
} 
else if（localStorage.getItem（'color'）=='dark'）{
setdark（）；
}
我编辑了代码，希望能在我的网站上运行。但它不工作。我做错了什么？

你应该添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
以前

<script src="scripts/styleswitcher.js" type="text/javascript"></script>
然后

$（文档）.ready（函数（）{
var setdark=函数（）{
$（'#head'）。附加（''）；
},
setlight=函数（）{
$（'link[rel=stylesheet][href=“CSS/dark.CSS type=“text/CSS”]”）。删除（）；
};
$（“#灯光”）。单击（功能（）{
setItem（'color'，'light'）；
setlight（）；
});
$（“#暗”）。单击（函数（）{
setItem（'color'，'dark'）；
setdark（）；
});
if（localStorage.getItem（'color'）=='light'）{
setlight（）；
} 
else if（localStorage.getItem（'color'）=='dark'）{
setdark（）；
}
})
您应该添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
以前

<script src="scripts/styleswitcher.js" type="text/javascript"></script>
然后

$（文档）.ready（函数（）{
var setdark=函数（）{
$（'#head'）。附加（''）；
},
setlight=函数（）{
$（'link[rel=stylesheet][href=“CSS/dark.CSS type=“text/CSS”]”）。删除（）；
};
$（“#灯光”）。单击（功能（）{
setItem（'color'，'light'）；
setlight（）；
});
$（“#暗”）。单击（函数（）{
setItem（'color'，'dark'）；
setdark（）；
});
if（localStorage.getItem（'color'）=='light'）{
setlight（）；
} 
else if（localStorage.getItem（'color'）=='dark'）{
setdark（）；
}
})
您需要在项目中包含jQuery

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Your title</title>
  <link rel="stylesheet" id="pagestyle" type="text/css" href="CSS/light.css">
  <link rel="alternate stylesheet" tittle="dark" type="text/css" href="CSS/dark.css">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="scripts/styleswitcher.js" type="text/javascript"></script>
</body>

</html>
您需要将jQuery包含到项目中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Your title</title>
  <link rel="stylesheet" id="pagestyle" type="text/css" href="CSS/light.css">
  <link rel="alternate stylesheet" tittle="dark" type="text/css" href="CSS/dark.css">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="scripts/styleswitcher.js" type="text/javascript"></script>
</body>

</html>
如果您想使用plain、JS，我建议您不要直接使用jQuery，请尝试这种方法

我对每一行都做了评论，使它更容易理解

//选择要附加的按钮并向其发送事件
var themetoglerbutton=document.querySelector（“#themetogler”）；
//检查是否有存储的主题
var storedTheme=localStorage.getItem['theme']；
//如果主题为黑色，则在主体上设置类
如果（存储主题==='dark'）{
document.body.classList.add（'dark'）；
}
//单击该按钮时附加和事件
TheMetoglerButton.addEventListener（'click'，function（）{
//事件包括在body元素上切换类
document.body.classList.toggle（'dark'）；
if（document.body.classList.contains（'dark'））{
setItem（'theme'，'dark'）；
}否则{
localStorage.removietem（'theme'）；
}
})
/*默认样式（无暗色类）*/
身体{
背景：白色；
}
/*身体有“黑暗”等级时的风格*/
身体黑{
背景：黑色；
}

切换主题
如果您想使用我推荐给您的纯JS，而不是直接使用jQuery，请尝试这种方法

我对每一行都做了评论，使它更容易理解

//选择要附加的按钮并向其发送事件
var themetoglerbutton=document.querySelector（“#themetogler”）；
//检查是否有存储的主题
var storedTheme=localStorage.getItem['theme']；
//如果主题为黑色，则在主体上设置类
如果（存储主题==='dark'）{
document.body.classList.add（'dark'）；
}
//单击该按钮时附加和事件
TheMetoglerButton.addEventListener（'click'，function（）{
//事件包括在body元素上切换类
document.body.classList.toggle（'dark'）；
if（document.body.classList.contains（'dark'））{
setItem（'theme'，'dark'）；
}否则{
localStorage.removietem（'theme'）；
}
})
/*默认样式（无暗色类）*/
身体{
背景：白色；
}
/*身体有“黑暗”等级时的风格*/
身体黑{
背景：黑色；
}

切换主题
您应该在使用jQuery插件之前加载它，然后调用它，直到dom和jQuery就绪

我想你最好先看看Mozilla的js。

你应该在使用jQuery插件之前加载它，然后调用它，直到dom和jQuery就绪

我想你最好浏览一下Mozilla的js。

你的代码是jQuery，而不是普通的javascript，所以你也需要加载jQuery库。在加载
styleswitcher.js
之前，在这里获取：。另外，
styleswitcher.js
应该加载在文档的末尾，而不是头部，除非你将所有jQuery代码都打包在a中，您的代码是jQuery，而不是普通的javascript，因此您也需要加载jQuery库。在加载
styleswitcher.js
之前，请在此处获取：。此外，
styleswitcher.js
应该加载在文档的末尾，而不是头部-除非您将所有jQuery代码包装在a中，否则我不需要在中删除styleswitcher.js吗头部？是的，你做得不好。我不需要删除头部的styleswitcher.js吗？是的，你做得不好。代码不工作？首选css是否存储在某个位置？我可以进行css切换，但每当我刷新页面或加载其他页面时，它都会重置为默认值。是的，你是对的。css注释破坏了样式l加载。没有。它是完全功能的。重新加载时主题重置将