用cookies实现的可记忆的样式切换效果代码下载

2024-10-28 14:07:36

无刷新cookies切换样式示例代码实例主要用到的代码

代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>styleswitcher我们-www.jb51.net </title>
<link title=red rel="stylesheet" type="text/css" href="red.css">
<LINK title=blue href="blue.css" type=text/css rel="alternate stylesheet">
<SCRIPT src="styleswitcher.js" type=text/javascript></SCRIPT>
<style>

</style>
</head>

<body>
<A onclick="setActiveStyleSheet('red');return false;" href="#">red</A>
<A onclick="setActiveStyleSheet('blue');return false;" href="#">blue</A>
<select name="changestyle" size="1">
<option value="red">red</option>
<option value="blue">blue</option>
</select><input type="button" value="变" onclick="setActiveStyleSheet(changestyle.value);return false;">
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>

</html>

styleswitcher.js

代码如下:

// styleswitcher.js

function setActiveStyleSheet(title)
{
var i, a, main;

for(i = 0; (a = document.getElementsByTagName("link")[i]); i++)
    {
        if (a.getAttribute("rel").indexOf("style") != -1 &&
            a.getAttribute("title"))
        {
            a.disabled = true;

if (a.getAttribute("title") == title)
                a.disabled = false;
        }
    }
}

function getActiveStyleSheet()
{
var i, a;

for(i = 0; (a = document.getElementsByTagName("link")[i]); i++)
    {
        if(a.getAttribute("rel").indexOf("style") != -1 &&
           a.getAttribute("title") && ! a.disabled)
            return a.getAttribute("title");
    }

return null;
}

function getPreferredStyleSheet()
{
var i, a;

for (i = 0; (a = document.getElementsByTagName("link")[i]); i++)
    {
        if(a.getAttribute("rel").indexOf("style") != -1 &&
           a.getAttribute("rel").indexOf("alt") == -1 &&
           a.getAttribute("title"))
            return a.getAttribute("title");
    }

return null;
}

function createCookie(name, value, days)
{
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }

else 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);

if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length, c.length);
}

return null;
}

window.onload = function(e)
{
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();

setActiveStyleSheet(title);
}

window.onunload = function(e)
{
var title = getActiveStyleSheet();

createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

red.css

代码如下:

#left { background-color:#0000FF; float:right;}

red.css

代码如下:

#left { background-color:#FF0000;float:left; }

用cookies实现的可记忆的样式切换效果代码下载

无刷新cookies切换样式示例代码实例主要用到的代码复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>styleswitcher我们-www.jb51.net </title> <link title=red rel="styleshee
基于JS实现简单的样式切换效果代码

本文实例讲述了基于JS实现简单的样式切换效果.分享给大家供大家参考.具体如下: 这是一款基于JS实现简单的样式切换代码,自由切换CSS样式,很多大网站现在正在用,我觉得这是个挺实用的不错的功能,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
WPF气泡样式弹窗效果代码分享

页面设计需求,做了一个气泡形状的弹出框,效果如下: 设计思路如下: 1. 使用Path绘制气泡的尖尖,将这个放到顶层: 2. 在用border绘制长方形框,将这个放到底层,并且设置Margin值,使得Path图层和border看起来衔接在一起. 代码如下: <Window x:Class="BubblePanelTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentatio
JS实现的样式切换功能tableCSS实例

本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r
详解AngularJS ng-class样式切换

整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g
JS获取和修改元素样式的实例代码

1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style
详解微信小程序Radio选中样式切换

详解微信小程序Radio选中样式切换本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下:  <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi
修改 bootstrap table 默认detailRow样式的实例代码

废话不多说了,直接给大家贴代码,具体代码如下所示: this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () { var $this = $(this), //a.detail-icon $tr = $this.parent().parent(), //current row index = $tr.data('index'), row = data[index
jQuery实现的网页右下角tab样式在线客服效果代码

本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码.分享给大家供大家参考,具体如下: 这是一款网页右下角tab样式的在线客服代码,若在火狐或chrome浏览器下,客服是带边框阴影的,IE8下好像没边框效果,整体不如在Chrome.火狐.Opera浏览器下.这款在线客服代码的底部使用了TAB选项卡的样式,鼠标点击可切换客服的内容,还是挺新颖的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom
jQuery点击导航栏选中更换样式的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!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> <tit

用cookies实现的可记忆的样式切换效果代码下载

相关推荐

随机推荐