0

我有这个 HTML 代码：

<link id="style1" rel="stylesheet" href="css/style.css" type="text/css" media="screen">

用这个js：

<script type='text/javascript'>
function toggle() {
    var el = document.getElementById("style1");
    if (el.href.match("css/style.css")) {
        el.href = "css/style-b.css";    
    }
    else {
        el.href = "css/style.css";  
    }
}

<button type="button" onclick="toggle()">Switch</button>

所以，我需要做：当我单击此按钮以更改 Css Href 和我的其他 .html 文档时.. 假设.. 当我从 index.html 转到带有链接的 contact.html 时，我需要在那里也可以更改css。

这个怎么做？（如果没有办法用 HTML/JS 做到这一点，我还有其他选择吗？）

谢谢

4

2 回答 2

1

两种可能的想法： 1. 使用 cookie 保存状态并在调用每个页面时检查 ( http://www.w3schools.com/js/js_cookies.asp ) 2. 使用本地存储保存状态。一般来说，它的作用类似于 cookie，并且更容易访问。( http://diveintohtml5.info/storage.html )

所以在你的脚本中你需要添加

localStorage.setItem("style", "-b");

然后在你的代码中的其他地方你需要

localStorage.getItem("style"),

并检查它是否存在

var el = document.getElementById("style1");
var style = localStorage.getItem("style");
if(style !== null && style == "b"){
  el.href = "css/style-b.css";
} else {
  el.href = "css/style.css";
}  

function toggle() {
 var el = document.getElementById("style1");
 if (el.href.match("css/style.css")) {
   el.href = "css/style-b.css"; 
   localStorage.setItem("style", "b");   
 }
 else {
   el.href = "css/style.css";
   localStorage.setItem("style", "a");  
 }
}
于 2013-11-07T20:03:53.457 回答
0

两种方法，要么使用带有 Javascript 的 GET 或 POST 变量，这将传递到每个页面，要么使用正确的方法，带有服务器端会话变量。

于 2013-11-07T20:03:56.607 回答