html如何切换主题样式,JS实现css主题样式切换:动态改变引入的css文件

一个页面要显示不同的主题风格,就需要写不同的css文件;

在做不同css文件相互切换时,首先要了解link标签中的rel属性;

rel属性值:

alternate文档的替代版本(比如打印页、翻译或镜像)。

stylesheet 文档的外部样式表。

start 集合中的第一个文档。

next 集合中的下一个文档。

prev 集合中的上一个文档。

contents 文档的目录。

index 文档的索引。

glossary 在文档中使用的词汇的术语表(解释)。

copyright 包含版权信息的文档。

chapter 文档的章。

section 文档的节。

subsection 文档的小节。

appendix 文档的附录。

help 帮助文档。

bookmark 相关文档。

一般我们在页面中引入样式使用的属性是stylesheet;如:

< link rel=’stylesheet’ type=’text/css’ href=’a.cc’>

这里我们要用到alternate属性,用来替换css文件:

html:

```

CSS主题切换

```

其中第一个link标签中的rel属性值为stylesheet,就是当前页面所加载显示的css样式文件;

第二个alternate stylesheet就是用来做替换用的,写在head中时不会被显示出来,但是会重服务器中加载到浏览器中;

这时候就需要写一个javascript方法来做触发,替换;

```

// 对切换主题的按钮绑定事件,用来做触发document.getElementById("sheet-a").addEventListener("click",function(){ setStyleSheet("a");

});

document.getElementById("sheet-b").addEventListener("click",function(){    setStyleSheet("b");

});/** * 查找所有的link标签,找到符合条件的css进行切换 * @title:需要切换的css文件名称,也可以是某值,主要是能够找到所要切换的link标签 **/functionsetStyleSheet(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;

}

}

}

}

};

```

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值