JavaScript如何动态切换主题，动态引入css样式

用生命在耍帅ㅤ

已于 2023-12-01 10:18:14 修改

阅读量448

点赞数 11

文章标签： javascript css

于 2023-11-30 16:57:25 首次发布

本文链接：https://blog.csdn.net/weixin_43583693/article/details/134716656

版权

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 引入默认样式 -->
  <link href="{% static 'web_detection/css/index1.css' %}" rel="stylesheet" id="index">
  <title>
    标题
  </title>
</head>

<body>
  
  <div id="app">内容</div>
</body>

<script>
  // 切换主题（参数为当前主题）
  function initTheme(theme) {
    // 获取上方引用css样式的组件
    var elementById = document.getElementById("index");

    if (theme == 1){
      // 换为主题2
      elementById.href = "{% static 'web_detection/css/index2.css' %}"
      theme = 2
    }else{
      // 换为主题1
      elementById.href = "{% static 'web_detection/css/index1.css' %}"
      theme = 1
    }
    //保存并记录当前主题，以便下次切换
  }
</script>
</html>