js实现一键换肤效果

本文实例为大家分享了js实现一键换肤效果的具体代码，供大家参考，具体内容如下

方法1

<!DOCTYPE html>
<html lang="en">
<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">
  <title>一键换肤</title>
  <style>
    :root {
      --color: white;
    }

    .card {
      width: 120px;
      height: 200px;
    }

    .controller {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }

    .btn {
      border: none;
      height: 30px;
      width: 100px;
      color: #eeeeee;
      background: linear-gradient(45deg, #ce7777, lightblue, #c19fc1, transparent);
      border-radius: 999px;
      box-shadow: 0 0 2px 2px #eeeeee;
      cursor: pointer;
    }

    .card {
      border-radius: 5px;
      box-shadow: 0 0 2px 2px rgb(126, 124, 124);
    }

    .card:nth-child(1) {
      background: black;
    }

    .card:nth-child(3) {
      background: white;
    }

    html, body {
      background: var(--color);
      opacity: 0.9;
    }
    body {
      height: 100vh;
    }
    *{
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>

  <div class="controller">
    <div class="card"></div>
    <div><button class="btn" onclick="changeSkin()">一键换肤</button></div>
    <div class="card"></div>
  </div>

</body>

</html>

方法2

<!DOCTYPE html>
<html lang="en">
<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">
  <title>change skin</title>
  <style id="theme">
    :root {
      --bgColor: #f00;
    }

    .skin {
      background: var(--bgColor);
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="skin"></div>
  <button type="button" onclick="changeSkin('black')">change theme</button>
  <script>
    changeSkin = (theme) => {
      console.log("function starts");
      document.getElementById("theme").innerHTML = `
        :root{--bgColor:${theme};}
        .skin {
          background: var(--bgColor);
          width: 200px;
          height: 200px;
        }
      `
    }
   
  </script>
</body>
</html>

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

赞 (0)

相关推荐

  • js简单实现网页换肤功能

    我发现网上写换肤功能写的有点长,就想想如何更简单方法实现这个功能,于是我自己写了一个. html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link id="changelink" rel="stylesheet" href="css/default.css&

  • JavaScript实现换肤功能

    JavaScript实现换肤功能

    一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu

  • JS实现换肤功能的方法实例详解

    JS实现换肤功能的方法实例详解

    本文实例讲述了JS实现换肤功能的方法.分享给大家供大家参考,具体如下: 首先准备HTML页面如下: <div id="container"> <div id="header"> <h3>无人驾驶要征服世界,得先解决这些问题</h3> </div> <div id="nav"> <input type="button" id="blue&qu

  • Javascript结合css实现网页换肤功能

    Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能) <ul id="skin"> <li id="s

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

  • javascript实现动态CSS换肤技术的脚本

    <SCRIPT LANGUAGE=javascript>     <!--     function SetCookie(name,value){         var argv=SetCookie.arguments;         var argc=SetCookie.arguments.length;         var expires=(2<argc)?argv[2]:null;         var path=(3<argc)?argv[3]:null; 

  • js实现简单的网页换肤效果

    js实现简单的网页换肤效果

    中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了 步骤: 1.在设计HTML代码时,用了一些小技巧,就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同.这样就可以使完成换肤操作简化很多. 2.HTML结构要有一个带id的样式表链接,通过操作该链接的herf属性的值,从而实现换肤 <link rel="stylesheet" href=&

  • js+css简单实现网页换肤效果

    js+css简单实现网页换肤效果

    本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br

  • AngularJS实现网站换肤实例

    AngularJS实现网站换肤实例

    网站不应该只注重功能,还应该注重用户体验:成熟的大型网站大都具备让用户自行选择主题及颜色的功能,AngularJS也可以做到这点. 效果图: 原理是使用ng-href来动态为网页更换样式: <link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css"> 代码: <!DOCTYPE html> <html ng-app="app&qu

随机推荐