Question

是否有人可能会建议为什么以下代码不会存储样式表选项。

的settings.php

<?php
session_start();
?>
<!doctype html>
<html>
<head> 
<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
function getActiveStyleSheet() {
var i, a;
 for(i=0; (a = document.getElementsByTagName("link")); i++) {
  if(a.getAttribute("rel").indexOf("style") != -1
  && a.getAttribute("title")
  && !a.disabled) return a.getAttribute("title");
  }
  return null;
} 
localStorage.setItem('activeStylesheet', getActiveStyleSheet())
</script>
<meta charset="utf-8">
<title>Intapp.Com</title>
<link rel="stylesheet" type="text/css" href="dwcss.css">
<link rel="alternate stylesheet"  type="text/css"  title="girly" href="style1.css">
<link rel="alternate stylesheet" type="text/css" title="default" href="dwcss.css">
<link rel="alternate stylesheet"  type="text/css"  title="neutral" href="style2.css">
<meta name="viewport" content="width=320.1, initial-scale=1.0, user-scalable=0 minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div class="header">
<h1> User Settings </h1>
</div>
<div id="box2">
To change to this style click here
<button onclick="changeStyle('girly')">Girly</button>
<button onclick="changeStyle('default')">Default</button>
<button onclick="changeStyle('neutral')">Neutral</button>  
</div> 
<div class="footer">
</div>
</body>
</html>

这是我试图检索本地存储值的地方，当我在浏览器中测试时，在index.php上激活了默认样式表，我无法看到我做错了如果有人可以帮助它会有很大帮助赞赏。

的index.php

<html>
<head> 
<script>
window.onload=setstyle()
{
localStorage.getItem('activeStylesheet')
}
</script>
<meta charset="utf-8">
<link rel="apple-touch-startup-image" href="appsplash.png">
<title>Intapp.Com</title>
<link rel="stylesheet" type="text/css" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="default" href="dwcss.css">
<link rel="alternate stylesheet"  type="text/css"  title="neutral" href="style2.css">
<meta name="viewport" content="width=320.1, initial-scale=1.0, user-scalable=0 minimum-scale=1.0, maximum-scale=1.0">
<link rel="apple-touch-icon" href="applogo.png"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>

Answer 1

在getActiveStylesheet中，您的for循环每次迭代都会a设置为document.getElementsByTagName("link")，而您应该迭代它：

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

此外，不是在页面加载时设置activeStylesheet，而是应在每次更改样式时设置它，即在changeStyle结束时设置：

function changeStyle(title) {
  var lnks = document.getElementsByTagName('link');
  for (var i = lnks.length - 1; i >= 0; i--) {
    if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
      lnks[i].disabled = true;
      if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
    }
  }
  localStorage.setItem('activeStylesheet', getActiveStyleSheet())
}

在index.php上，应该有代码来实际设置样式，例如：

window.onload = function () {
  var
    lnks = document.getElementsByTagName('link'),
    activeStylesheet = localStorage.getItem('activeStylesheet');
  for (var i = lnks.length - 1; i >= 0; i--)
    if (lnks[i].getAttribute('rel').indexOf('style') > -1 && lnks[i].getAttribute('title'))
      lnks[i].disabled = lnks[i].getAttribute('title') != activeStylesheet;
};

当然，您应该尝试在某些时候分解这三个代码块之间共享的重复代码。

PS：一般来说，如果你缩进你的代码，它会更容易阅读。

Answer 2

我假设你从http://alistapart.com/article/alternate传递了这段代码。如果是这样，您可以使用http://d.alistapart.com/alternate/styleswitcher.js，并进行以下更改：

通过调用readCookie(name)

localStorage.getItem(name)

通过调用createCookie(name, value, days)

localStorage.setItem(name, value)

localStorage未设置

2 个答案: