使用alternate stylesheet（CSS）一键换肤

最新推荐文章于 2022-11-04 10:23:19 发布

张小益达

最新推荐文章于 2022-11-04 10:23:19 发布

阅读量1.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41033913/article/details/104072514

版权

本文介绍如何利用HTML link标签的rel属性中的alternate stylesheet功能来实现一键换肤。通过创建多个CSS文件，并设置不同的id，可以轻松切换网站主题。虽然AS会一次性加载所有样式文件，但适合频繁更换主题的场景；相比之下，JS动态加载更适合偶尔切换。

摘要由CSDN通过智能技术生成

使用link的rel支持的一个属性alternate stylesheet实现一键换肤功能

之前写过一个直接利用JS实现换肤的可以参考下JavaScript一键换肤

alternate stylesheet中文意思是：可替代的样式，不过我们用的不是很多，一般只用stylesheet就够用

首先需要一个index.html、style1.css、style2.css、index.js文件
Tips:在引入css文件的时候，带有stylesheet的链接的样式将作为默认样式，而alternate stylesheet会变成可替换样式，而且，在链接中一定需要加上title属性，其属性值将会变成后续替换的一个id

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>alternate stylesheet一键换肤</title>
    <link
      rel="alternate stylesheet"
      title="silver"
      href="./style2.css"
      type="

最低0.47元/天解锁文章

张小益达

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用alternate stylesheet（CSS）一键换肤

使用link的rel支持的一个属性alternate stylesheet实现一键换肤功能之前写过一个直接利用JS实现换肤的可以参考下JavaScript一键换肤alternate stylesheet中文意思是：可替代的样式，不过我们用的不是很多，一般只用stylesheet就够用首先需要一个index.html、style1.css、style2.css、index.js文件Tips:...
复制链接

扫一扫

专栏目录