通过JavaScript动态切换CSS样式表

原理就是通过添加一个link节点到head里,附加一个css引用.
其中 extstyle 函数是添加一个ID为extsyle的link节点.
extstyle 节点就是用于切换引用的css文件.

function C(id) {
		return !id ? null : document.getElementById(id);
	}

	/*
	 * 风格切换
	 * cssname css文件名
	 */
	function extstyle(cssname) {
		if(!C('extstyle')) {
			css = document.createElement('link');
			css.id = 'extstyle',
			css.type = 'text/css';
			css.rel = 'stylesheet';
			var headNode = document.getElementsByTagName("head")[0];
			headNode.appendChild(css);
		}
		// 引用的CSS文件的地址
		C('extstyle').href = '/usr/themes/mono/' + cssname + '.css';
		setcookie('extstyle', cssname, 31104000);
	}
	
	/*
	 * 宽窄切换
	 * obj 产生事件的对象
	 */
	function widthswitch(obj) {
		if (obj.innerHTML=="小") {
			extstyle('small');
		} else if (obj.innerHTML=="大") {
			extstyle('big');
		} else {
			// 删除节点,
			if (C('extstyle')) {
				var tmpnode = C('extstyle');
				tmpnode.parentNode.removeChild(tmpnode);
			}
			setcookie('extstyle', '', -1);
		}
	}

	/*
	 * 保存Cookies
	 */
	function setcookie(){...}

	/*
	 * 读取Cookies
	 */
	function getcookie(){...}


以上代码是在客户端切换时使用,下面是相应的服务端PHP代码
请将这段代码放在header.php的head中


<?php $extstyle = isset($_COOKIE["__typecho_extstyle"]) ? $_COOKIE["__typecho_extstyle"] : "";
if (in_array($extstyle, array('width_930px','width_1100px'))){ ?>
<link id="extstyle" rel="stylesheet" href="<?php $this->options->themeUrl($extstyle . '.css'); ?>" type="text/css" />
<?php } ?>


当然,你也可以不用服务端代码,而是在客户端页面加载完成时再根据Cookies里的内容来加载css,
可是那样用户就会看到在CSS切换中时出现的空白图片,那样就...

标签:样式表, JavaScript, PHP

已有 8 条评论

  1. 灰常强大~~~

  2. 可以考虑通过检测读者屏幕宽度自动切换!

  3. 技术文章看不大懂,囧

    1. 不是吧,一点点ja<x>vasc<x>ript而已

      1. 啥时教教我怎么把你这回复的效果加到我的博客里啦,菜鸟摸不着头

        1. 本来打算刚才就帮你解决的,结果发现你的主题中的jQuery有问题,
          就放弃了,等你的主题正常了再说吧

          1. 我来了,主题已经恢复来,晕,忘来备份了。

          2. 怎么联系你呀?这么不好交流,找不到你的联系方式

添加新评论