码迷,mamicode.com
首页 > Web开发 > 详细

Html主题样式切换方法

时间:2018-06-20 12:52:59      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:个性   css   浏览器   命名   char   get   效果   条件   编写   

随着网站个性化体验的要求不断提高,无论移动和PC 端,都会有主题切换的功能;当然切换的样式复杂度大小不同,从简单的配色切换到复杂的配色布局切换;现总结几种方案,可根据项目需求,实现复杂程度和效果体验,选择方案;

一、切换样式表引用:

  编写两套样式 them1.css 、them2.css  通过js 动态切换 link 标签的属性,或追加目标主题样式表、清除现有样式表;Fixfox 浏览器可以通过浏览器切换 link 样式表,但是IE 浏览器不支持,需要手动实现

  优点:简单、快捷、方便;

  缺点:由于是切换引用css 文件,会由于网络原因造成加载css 文件延迟、或由于javascript 错误阻塞造成切换失败,不利于客户体验;

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS主题切换</title> 
<link rel="stylesheet" type="text/css" href="a.css" title="a">
<link rel="alternate stylesheet" type="text/css" href="b.css" title="b">
<script>
 // 对切换主题的按钮绑定事件,用来做触发
document.getElementById("sheet-a").addEventListener("click",function(){
    setStyleSheet("a");
});
document.getElementById("sheet-b").addEventListener("click",function(){
    setStyleSheet("b");
});
/**
 * 查找所有的link标签,找到符合条件的css进行切换
 * @title:需要切换的css文件名称,也可以是某值,主要是能够找到所要切换的link标签
 **/
function setStyleSheet(title){  
    // 首先找到DOM中所有的link标签
    var link_list = document.getElementsByTagName("link");
    if ( link_list ){
        for ( var i=0;i<link_list.length;i++ ){
            // 要找到所有link中rel属性值包括style的,也就是包括stylesheet和alternate stylesheet;
            if ( link_list[i].getAttribute("rel").indexOf("style") != -1 ){
                // 将符合条件的link的disabled的属性设为true,都改为禁用;
                link_list[i].disabled = true;
                // 然后判断link标签中的title属性,找到我们需要替换的css文件
                // 找到后将该link的disabled改为启用;
                if ( link_list[i].getAttribute("title") === title){
                    link_list[i].disabled = false;
                }
            }
        }
    }
};
</script>

</head> 
<body> 
    <div class="main">
        <div class="con">
            <input type="button" id="sheet-a" value="主题a" />
            <input type="button" id="sheet-b" value="主题b" />
        </div>
    </div>
</body
</html>

  

二、通多 javaScript  操作Dom Class 属性

  该方式需要统一Class 的命名规则前缀or后缀,如按钮  btn-them1、btn-them2,通过javascript 控制 class 

  优点:响应快速、没有延迟;适用于单页面应用和局部样式切换

  缺点:全局样式切换 需要全局样式添加标记、多页面的话开发量相对较大,繁琐,很难做到全站的CSS切换,只能局限在当前页上。

 

 

 

三、通过服务器端脚本

  Asp、 Php 、Jsp  都可实现

Html主题样式切换方法

标签:个性   css   浏览器   命名   char   get   效果   条件   编写   

原文地址:https://www.cnblogs.com/jimbo-zhang/p/9202980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!