Question

好的我是这个网站的新手，甚至是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>

Answer 1

lightTheme：

中的错误

function lightTheme() {
  var theme = document.getElementById('lightTheme');
  theme.href = "styleSheetLightTheme.css";
}

Answer 2

在lighttheme功能中，更改变量theme

function lightTheme() {
  var theme = document.getElementById('lightTheme');
  theme.href = "styleSheetLightTheme.css";
}

Answer 3

lighttheme函数没有做任何事情。

function lightTheme() {
  var theme = document.getElementById('lightTheme');
  theme.href = "styleSheetLightTheme.css";
}

function darkTheme() {
  var theme = document.getElementById('darkTheme');
  theme.href = "styleSheetDarkTheme.css";
}

Answer 4

This one with set cookie valid for 1 day, so it will checks for the style-setting cookie, and if present, switches the style sheets accordingly. Otherwise, it use default style.

<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>

Script:

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 '' ;
}

在样式表css之间切换

4 个答案: