使用alternate stylesheet（CSS）一键换肤

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

原创最新推荐文章于 2022-11-04 10:23:19 发布 · 1.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

41 篇文章

订阅专栏

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

使用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="text/css"
      media="screen"
    />
    <link
      rel="stylesheet"
      title="modern"
      href="./style1.css"
      type="text/css"
      media="screen"
    />
  </head>
  <body>
    <div>hello</div>
    <p>
      <button data-theme="modern">pink</button>
      <button data-theme="silver">blue</button>
    </p>
    <script src="./jquery-3.3.1-min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

// style1.css
div {
  color: pink;
}
// style2.css
div {
  color: blue;
}

let pBtn = document.querySelector('p');
// 利用事件代理机制能够提高性能
pBtn.addEventListener('click', el => {
// 将theme的值保存到dataset中
  let theme = el.target.dataset.theme;
  changeStyle(theme);
});
function changeStyle(t) {
  // 利用jquery可以比较好获取到link标签中含有title属性链接
  $('link[title]').each(function() {
    this.disabled = true;
    this.disabled = this.title != t;
  });
  return false;
}

说明一下使用JS和alternate stylesheet（后简称AS）的优缺点：