html切换页面主题,Html主题样式切换方法

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

一、切换样式表引用:

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

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

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

CSS主题切换

// 对切换主题的按钮绑定事件,用来做触发

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中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;

}

}

}

}

};

二、通多 javaScript  操作Dom Class 属性

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

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

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

三、通过服务器端脚本

Asp、 Php 、Jsp  都可实现

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个Vue项目多模块集成主题切换的demo,使用了Sass作为CSS预处理器和Element UI作为UI库: 1. 安装Element UI和Sass ``` npm install element-ui sass sass-loader ``` 2. 创建一个theme.scss文件,定义变量和样式 ```scss // 定义主题变量 $primary-color: #409EFF; $success-color: #67C23A; $warning-color: #E6A23C; $error-color: #F56C6C; $info-color: #909399; // 根据变量定义样式 .el-button { background-color: $primary-color; border-color: $primary-color; &:hover, &:focus { background-color: lighten($primary-color, 10%); border-color: lighten($primary-color, 10%); } } .el-alert { background-color: $info-color; border-color: $info-color; } ``` 3. 在main.js文件中添加以下代码,引入Element UI和theme.scss文件 ```js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import './theme.scss'; Vue.use(ElementUI); ``` 4. 创建一个ThemeSwitcher组件,用来切换主题 ```html <template> <div> <el-radio-group v-model="theme" @change="changeTheme"> <el-radio-button label="theme-light">浅色主题</el-radio-button> <el-radio-button label="theme-dark">深色主题</el-radio-button> </el-radio-group> </div> </template> <script> export default { data() { return { theme: 'theme-light' } }, methods: { changeTheme() { const oldLink = document.getElementById('theme'); const newLink = document.createElement('link'); newLink.id = 'theme'; newLink.rel = 'stylesheet'; newLink.href = `/themes/${this.theme}.css`; document.head.replaceChild(newLink, oldLink); } } } </script> ``` 5. 创建两个主题样式文件,分别为theme-light.css和theme-dark.css,放在public/themes文件夹下 6. 在App.vue中引入ThemeSwitcher组件,并在页面中使用 ```html <template> <div id="app"> <theme-switcher></theme-switcher> <router-view></router-view> </div> </template> <script> import ThemeSwitcher from './components/ThemeSwitcher.vue'; export default { components: { ThemeSwitcher } } </script> ``` 这样就可以实现多模块集成主题切换了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值