1

我是一个网页设计新手，所以我不确定这是否是最好的论坛，或者是否有一些完全让我无法理解的明显解决方案。如果是这种情况，请原谅我。所以，这就是交易。

我正在使用craft cms 构建一个博客，并且在我的布局文件上我使用styleswitcher.js 脚本在两个css 文件之间切换。

<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.example.com/weblog1.css"/>
<link rel="stylesheet" type="text/css" media="screen" title="aeroplaniko" href="http://www.example.com/weblog1.css"/>
<link rel="alternate stylesheet" type="text/css" media="screen" title="white" href="http://www.example.com/weblog3.css" />

<script type="text/javascript" src="http://www.example.com/jquery-1.12.1.min.js" ></script>
<script type="text/javascript" src="http://www.example.com/styleswitcher.js">
</head>

<body>
<a href="http://www.example.com/weblog3.css" onclick="setActiveStyleSheet('white'); return false;" class="WhiteButton"></a><a href="http://www.example.com/weblog1.css" onclick="setActiveStyleSheet('aeroplaniko'); return false;" class="LightblueButton"></a></body>

我还使用 css 样式来部署社交媒体图标。例如，facebook 看起来像这样：

 .facebook {
 margin-right: 2px;
 width: 28px;
 height: 28px;
 display:inline-block;
 background-repeat:no-repeat;
 background-image: url('logos/facebook.png');
 background-size:28px 28px;
 background-position:center bottom;
}
.facebook:hover {
   background-image: url('logos/facebookhover.png');
}

当我注意到 Internet Explorer 无法显示 png 文件时，我决定切换到 svg 文件。经过一些工作，我能够将我的 png 文件转换为 svg。我还将样式表上引用的所有 png 文件更改为 svg。

然而，这就是问题所在。一旦我使用包含 svg 文件的 css 样式表，在样式之间切换只会影响我进行切换的特定页面，而不是整个站点。

因此，如果我在主页上切换样式，然后转到文章页面，我会看到以前的样式表。有时，即使我浏览分页页面，样式也会发生变化。

那么，出了什么问题，我该如何解决？

PS。我应该注意到，当我在 ipad 上测试我的网站时，即使使用 png 文件，我也注意到了同样的问题。

PS2。好的，这是 styleswitcher.js 文件中的代码：

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

4

0 回答 0