[英]Switch between stylesheets css
好的，我是这个网站的新手，甚至是html，css和javascript的新手。
就像标题中所说的，我需要在样式表之间进行切换的帮助。
我做了我需要的一切，但有一件事情，在样式表之间切换可以在Internet Explorer中完美运行，但不能在chrome中运行。
铬发生了什么？ 我也可以切换为chrome，一切正常，但整个背景颜色不会改变，只有查看的部分变为黑色，然后您需要向下滚动以更改页面其余部分的颜色。
寻求帮助会很好。
这是代码。
function darkTheme() { var theme = document.getElementById('lightTheme'); theme.href = "styleSheetDarkTheme.css"; } function lightTheme() { var theme = document.getElementById('lightTheme'); theme.href = "styleSheetLightTheme.css"; }
#option_list { height: 40px; width: 500px; margin: auto; } #option1 { position: relative; display: inline-block; height: 40px; width: 100px; margin-left: 0.7291666666666666em; margin-right: 0.7291666666666666em; background-clip: content-box; text-align: center; cursor: pointer; font: bold 19px serif; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .themes { display: block; padding: 20px; transition: 0.2s; } #option1:hover { background-color: rgb(84, 84, 84); color: white; } #dropDownMenu { position: fixed; padding-left: 0px; background-color: rgb(84, 84, 84); width: 190px; margin-top: 17px; display: none; color: #fff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #option1:hover #dropDownMenu { display: block; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .themes:hover { background-color: rgba(3, 3, 3, 0.51); }
<head> <link id="lightTheme" rel="stylesheet" type="text/css" href="styleSheetLightTheme.css"> </head> <body> <div id="option_list"> <div id="option1"> Theme <ul id="dropDownMenu"> <li onclick="darkTheme()" class="themes">Dark the</li> <li onclick="lightTheme()" class="themes">Light theme</li> </ul> </div> </div> </body>
错误在你lightTheme ：
function lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
在lighttheme功能中，更改可变theme
function lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
lighttheme功能什么也没做。
function lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
function darkTheme() {
var theme = document.getElementById('darkTheme');
theme.href = "styleSheetDarkTheme.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 '' ;
}
如何在2个CSS样式表之间切换以与jQuery-UI一起使用？
[英]How do I switch between 2 css stylesheets for use with jQuery-UI?
在 2 个样式表之间切换并使用本地存储保持用户偏好
[英]Switch between 2 stylesheets and perpetuate user preference with local storage
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.