Question

我有一个简单的样式表切换器，可在2个样式表之间切换。当我点击红色时，它会从灰色变为红色，当我尝试从红色切换回灰色时，它会重新开始。

我添加了时间戳以防止缓存。我的代码在下面

  <link rel="stylesheet" title="grey" href="css/grey.css" type="text/css">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script language="javascript">
$(document).ready(function() {
var timestamp =+Date.now();
console.log(timestamp);
$('#red').click(function (){
   $('link[href="css/grey.css"]').attr('href','css/red.css?='+Date.now());

});
$('#grayscale').click(function (){
   $('link[href="css/red.css"]').attr('href','css/grey.css?='+Date.now());
   //alert("grey");
});

});

</script>
</head>

<body>
<p> lorem ipsum lorem iuipsum </p>



<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>


 <a href="#"  id="red"> red</a>
 <a href="#"  id="grayscale"> grey</a>

Answer 1

我重写并替代解决方案，与时间戳一起使用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Theme Switcher </title>

 <!--<link rel="stylesheet" title="red" href="css/red.css" type="text/css">
  <link rel="stylesheet" title="grey" href="css/grey.css" type="text/css">-->

  <link href="css/grey.css" rel="stylesheet" type="text/css" id="theme">


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script language="javascript">

$(document).ready(function() {
var timestamp =+Date.now();
console.log(timestamp);

$("button[data-theme]").click(function() {
    //alert($(this).data("theme"));
    $("head link#theme").attr("href", $(this).data("theme"));
});


});




</script>
</head>

<body>
<p> lorem ipsum lorem iuipsum </p>




<button id="grayscale" data-theme="css/grey.css">Gray Theme</button>
<button id="redscale" data-theme="css/red.css"> Red Theme</button>





</body>
</html>

样式表切换器缓存/不更改回原始样式表

1 个答案: