jQuery框架+cookie选择样式表文件【转】

最新推荐文章于 2021-08-03 22:03:11 发布

iteye_5823

最新推荐文章于 2021-08-03 22:03:11 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript+jquery+ajax 文章标签：框架 jQuery CSS C C++ ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_5823/article/details/81971521

JavaScript+jquery+ajax 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现网页样式动态切换的方法。用户可通过点击不同样式的链接来改变网页的主题风格，同时利用Cookie记录用户的偏好设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换样式表title>
<script type="text/javascript" src="jquery.js">script>
<script type="text/javascript" src="switchStyle.js">script>
<link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
head>

<body>
<h1>hello babyh1>
<a href="#" class="styles" rel="style1">style1a>
<a href="#" class="styles" rel="style2">style2a>
<a href="#" class="styles" rel="style3">style3a>
body>
html>

JS:

$(function(){
     $('.styles').click(function()
     {
         switchStyle(this.rel); //this.rel 取出当前元素属性rel的值,也可以使用id
        return false;
     });
    var c=readCookie('style');
    if (c) switchStylestyle(c);
});

function switchStyle(styleName)
{
     $('link[@rel*=style][@title]').each(function(i)    //遍历link
     {
        this.disabled=true;
        if(this.title == styleName)this.disabled = false;
     });
     createCookie('style',styleName,365);
}

function createCookie(name,value,days){
    if(days)
     {
        var date=new Date();
         date.setTime(date.getTime()+(days*24*60*60*1000));//1000毫秒 getTime()取从1970.1.1到当前时间毫秒
        var expires=" ; expires="+date.toGMTString();
     }else var 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);   //charAt(0) 看C的0位置是什么，如果c不存在返回" "
        if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length);
     }
    return null;
}
function eraseCookie(name){
     createcokie(name,"",-1)
}

css文件3个.
style1.css :
body{background:#CCCCCC;}
h1{color:red;}
style2.css :
body{background:#6699FF;}
h1{color:#336600;}
style3.css :
body{background:#CC99CC;}
h1{color:#FFFF00;}