js简单实现网页换肤功能

 更新时间:2022年07月01日 15:30:12   投稿:lijiao  
这篇文章主要为大家详细介绍了js简单实现网页换肤功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

我发现网上写换肤功能写的有点长,就想想如何更简单方法实现这个功能,于是我自己写了一个。

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link id="changelink" rel="stylesheet" href="css/default.css" rel="external nofollow" />
  </head>
  <body>
    <script>
      
      var csslink = document.getElementById("changelink");
      
      //初始化主题
      loadtheme();
      
      function changetheme(color){
        csslink.href = "css/"+color+".css";
        //保存主题到cookies
        document.cookie="theme="+color;
      }
      
      function loadtheme(){
        //从cookies读取主题
        var themevalue=document.cookie.split(";")[0].split("=")[1];
        if(themevalue==null){
          csslink.href = "css/default.css";
        }else{
          csslink.href = "css/"+themevalue+".css";
        }
      }
      
    </script>
    <button onclick="changetheme('default')">默认</button>
    <button onclick="changetheme('red')">红色</button>
    <button onclick="changetheme('green')">绿色</button>
  </body>
</html>

css文件

default.css

body{
  background: #ffffff;
}

red.css

body{
  background: #ff0000;
}

green.css

body{
  background: #008000;
}

 PS:当然设置主题的参数也可以保存到后端(推荐),防止禁用cookies主题无法生效。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 超精准的javascript验证身份证号的方法

    超精准的javascript验证身份证号的方法

    这篇文章为大家分享了一个超精准的javascript验证身份证号的具体实现方法,根据身份证号对其进行性别的判定,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JScript中的条件注释详解

    JScript中的条件注释详解

    这篇文章主要介绍了JScript中的条件注释详解,本文讲解了@cc_on、@if、@set、@_win32、@_win16、@_mac等条件注释语句及可用于条件编译的预定义变量,需要的朋友可以参考下
    2015-04-04
  • JavaScript实现页面截图3种解决方案

    JavaScript实现页面截图3种解决方案

    网页截图是指将网页上的内容截取下来,并保存为图片的过程,下面这篇文章主要给大家介绍了关于JavaScript实现页面截图的3种解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 原生JavaScript实现Ajax异步请求

    原生JavaScript实现Ajax异步请求

    ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获取服务器端的功能来展示如何使用纯javascript实现ajax功能,以弄清其原理.
    2017-11-11
  • 完美解决手机网页中输入框被输入法遮挡的问题

    完美解决手机网页中输入框被输入法遮挡的问题

    下面小编就为大家分享一篇完美解决手机网页中输入框被输入法遮挡的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • JS 使用for循环遍历子节点查找元素

    JS 使用for循环遍历子节点查找元素

    这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素,经测试,效果不错,需要的朋友可以看看
    2014-09-09
  • 通过滑动翻页效果实现和移动端click事件问题

    通过滑动翻页效果实现和移动端click事件问题

    这篇文章主要介绍了滑动翻页效果实现和移动端click事件问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • 使用不同的方法结合/合并两个JS数组

    使用不同的方法结合/合并两个JS数组

    这是一篇关于JavaScript数组使用的一些技巧,我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点
    2014-09-09
  • 微信小程序实现导航功能的操作步骤

    微信小程序实现导航功能的操作步骤

    这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Javascript 继承实现例子

    Javascript 继承实现例子

    在真正的Web站点和应用程序中,几乎不可能创建名为ClassA和ClassB的类,更可能的是创建表示特定事物(如形状)的类。考虑本章开头所述的形状的例子,Polygon、Triangle和Rectangle类就构成了一组很好的探讨数据。
    2009-08-08

最新评论