1

次のコードがスタイルシートの選択を保存しない理由を誰かがおそらく示唆できますか?

設定.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>
4

2 に答える 2

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

もちろん、ある時点でこれら 3 つのコード ブロック間で共有される重複コードを除外するようにしてください。

PS: 一般に、コードをインデントすると、はるかに読みやすくなります。

于 2013-03-18T10:07:42.803 に答える
0

このコードを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)
于 2013-03-18T22:21:28.940 に答える