目前也有一些网站通过前端按钮控制改变页面样式,比如改变背景色,改变字号,改变布局等等。大体可以分两类:一类是局部改变,另一类是整体改变。
局部改变只需要写简单的js抓取相应标签结构用.css方法变换即可,还能加上过渡效果,这个不需要多余的请求,仅仅是改变页面元素,而不是修改文件本身,所以不会刷新整体页面。
而整体改变也有它的好处,当样式需要进行较大调整 并且希望有多种不同样式可变时,就用得上了。本篇主要是介绍后者。

思路/原理

一般页面加载style样式是通过link标签来实现的。这里我们就要用到link标签rel="alternate stylesheet"属性去实现变化页面导入样式表的效果。我们可以查看网站的源码,里面的link标签rel的属性一般为stylesheet,

rel="stylesheet"属性是将一个样式表立即应用到页面文档上
rel="alternate stylesheet"属性则是将该样式作为备用在默认情况下暂时禁用掉(也就是暂不加载)

然后我们通过js来获取link标签,并且对这些标签进行disabled属性的值来切换设置,这样就可实现样式表的切换了。
disabled属性也应用于其他标签,它的作用为:disabled = true;表示标签不会立即生效;disabled = false;表示立即生效

link标签

针对WP来说,除了默认样式,假设本站还准备用另一样式style2.css作为切换,也通过link标签调用

<link rel='stylesheet'  href='<?php bloginfo('template_directory'); ?>/style.css' title="styles1"  type='text/css' media='all' />
<link rel='alternate stylesheet'  href='<?php bloginfo('template_directory'); ?>/style2.css' title="styles2"  type='text/css' media='all' />

默认样式title="style1",另一样式title="style2",设置title属性是为了下面方便抓取以及判断。

切换按钮

我们可以用a标签来作为切换按钮,并给a标签加上class以便与js点击事件进行绑定。

<a href="javascript:;" rel="styles1" class="cssswitch">样式1</a>
<a href="javascript:;" rel="styles2" class="cssswitch">样式2</a>

这里注意a标签也设置了rel属性,分别为styles1和styles2,与上面link标签中的title属性对应,作为判断执行的连接点。

JS代码

该准备的都已经完毕,剩下的就是根据上面所述思路逻辑进行控制,代码如下:(核心部分我已经做了注释)

jQuery(document).ready(function() { // 初始化载入
    changeCss(); 
});
function changeCss() { // 主要函数
    $('.cssswitch').click(function() // 点击事件绑定切换按钮标签的class
    {
        switchCss(this.getAttribute("rel")); // 获取该class的rel属性 并执行switchCss函数
        return false;
    });
    var c = readCookie('style'); // 读取Cookie
    if (c) switchCss(c);

}
function switchCss(styleName) // switchCss函数
{
    $('link').each(function(i) // 遍历link 标签
    {
        this.disabled = true; // 设置disable值 默认为true ,即默认全部不启用
        if (this.getAttribute('title') == styleName) this.disabled = false; // 若获取link标签内的title值与a标签中rel属性值相同,则disable=false,启用该样式。
    });
    createCookie('style', styleName, 365); // 刷新Cookie
}
function createCookie(name,value,days) { // 创建Cookie函数
    if (days)    {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) { // 读取Cookie函数
    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);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name){ // 擦除Cookie函数(必要时可调用)
    createCookie(name,"",-1);
}

这样大体就完成了,该脚本自然需要jQuery库的支持,并且支持IE浏览器,由于设置了Cookie所以待下次你访问页面时依然会保留你最后一次选择的样式,还不错吧?!
下面的这个方法也可以参考一下,代码与本篇不同:

http://cssrefresh.frebsite.nl/