Javascript 在样式表和css之间切换
好的，我是这个网站的新手，甚至在html、css和javascript方面也是新手 正如标题所说，我需要在样式表之间切换的帮助 我做了我需要的一切，但有一件事，在internet explorer中切换样式表是完美的，但在chrome中却不行 chrome中发生了什么？我也可以切换到chrome浏览器，一切都很完美，但不会改变整个背景颜色，只有查看部分变为黑色，然后你需要向下滚动以更改页面其余部分的颜色 能得到一些帮助会很好 这是代码Javascript 在样式表和css之间切换,javascript,html,css,google-chrome,Javascript,Html,Css,Google Chrome,好的，我是这个网站的新手，甚至在html、css和javascript方面也是新手 正如标题所说，我需要在样式表之间切换的帮助 我做了我需要的一切，但有一件事，在internet explorer中切换样式表是完美的，但在chrome中却不行 chrome中发生了什么？我也可以切换到chrome浏览器，一切都很完美，但不会改变整个背景颜色，只有查看部分变为黑色，然后你需要向下滚动以更改页面其余部分的颜色 能得到一些帮助会很好 这是代码 函数暗线（）{ var-theme=document.ge
函数暗线（）{
var-theme=document.getElementById（'lightTheme'）；
theme.href=“styleSheetDarkTheme.css”；
}
函数lightTheme（）{
var-theme=document.getElementById（'lightTheme'）；
theme.href=“styleSheetLightTheme.css”；
}#选项列表{
高度：40px；
宽度：500px；
保证金：自动；
}
#选择1{
位置：相对位置；
显示：内联块；
高度：40px；
宽度：100px；
左边距：0.729166em；
右边距：0.729166em；
背景剪辑：内容框；
文本对齐：居中；
光标：指针；
字体：粗体19px衬线；
-webkit转换：所有0.2秒；
-moz转换：全部为0.2s；
-ms转换：均为0.2s；
-o-过渡：均为0.2s；
过渡：均为0.2s；
}
.主题{
显示：块；
填充：20px；
过渡：0.2s；
}
#选项1：悬停{
背景色：rgb（84,84,84）；
颜色：白色；
}
#下拉菜单{
位置：固定；
左侧填充：0px；
背景色：rgb（84,84,84）；
宽度：190px；
利润上限：17像素；
显示：无；
颜色：#fff；
边框左下半径：5px；
边框右下半径：5px；
}
#选项1：悬停#下拉菜单{
显示：块；
边框右下半径：5px；
边框左下半径：5px；
}
.主题：悬停{
背景色：rgba（3,3,3,0.51）；
}
主题
黑暗
灯光主题
lightthemethemefunction lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
lightthemefunction lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
function darkTheme() {
var theme = document.getElementById('darkTheme');
theme.href = "styleSheetDarkTheme.css";
}
您的
lightTheme中出现错误function lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
这个设置cookie的有效期为1天，因此它将检查样式设置cookie，如果存在，则相应地切换样式表。否则，它将使用默认样式
<head>
<link rel="stylesheet" type="text/css" title="light" href="styleLightTheme.css">
<link rel="alternate stylesheet" type="text/css" title="dark" href="styleDarkTheme.css">
</head>
<body onload="set_style_from_cookie()">
<div id="option_list">
<div id="option1">
Theme
<ul id="dropDownMenu">
<li onclick="switch_style('dark'); return false;" class="themes" id="dark">Dark Theme</li>
<li onclick="switch_style('light'); return false;" class="themes" id="light">Light Theme</li>
</ul>
</div>
</div>
</body>
主题
- 暗主题
- 灯光主题
var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;
function switch_style ( css_title )
{
var i, link_tag ;
for (i = 0, link_tag = document.getElementsByTagName("link") ;
i < link_tag.length ; i++ ) {
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
link_tag[i].title) {
link_tag[i].disabled = true ;
if (link_tag[i].title == css_title) {
link_tag[i].disabled = false ;
}
}
set_cookie( style_cookie_name, css_title,
style_cookie_duration );
}
}
function set_style_from_cookie()
{
var css_title = get_cookie( style_cookie_name );
if (css_title.length) {
switch_style( css_title );
}
}
function set_cookie ( cookie_name, cookie_value,
lifespan_in_days, valid_domain )
{
var domain_string = valid_domain ?
("; domain=" + valid_domain) : '' ;
document.cookie = cookie_name +
"=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
//
var cookie_string = document.cookie ;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match (
'(^|;)[\s]*' +
cookie_name +
'=([^;]*)' );
return decodeURIComponent ( cookie_value[2] ) ;
}
return '' ;
}
var style\u cookie\u name=“style”；
var style_cookie_duration=30；
功能开关样式（css标题）
{
变量i，链接标签；
对于（i=0，link_tag=document.getElementsByTagName（“link”）；
idarkTheme（）