js/jQuery控制ClassName制作主题（换肤）

作者: de_self | 来源:发表于2018-10-14 18:58 被阅读28次

在项目中，我们需要对导航栏以及侧边栏进行主题切换，实现页面换肤功能
首先对body进行id命名
然后在css中，写多套css分别以主题名为父classname
通过切换body的className来切换主题
示例如下
html

<body id="themenID" class="grey">
  <div class="css1"></div>
  <div class="css2"></div>
</body>

css

.grey .css1{
  background: grey;
}
.grey .css2{
  background:red;
}
.blue.css1{
  background:blue;
}
.blue .css2{
  background:black;
}

js

setMenuColor:function(){
    $("#themenID").removeClass();
    $("#themenID").addClass("blue");
}

这样就可以转换主题咯

js/jQuery控制ClassName制作主题（换肤）
在项目中，我们需要对导航栏以及侧边栏进行主题切换，实现页面换肤功能首先对body进行id命名然后在css中，写多套...
js换肤、js可控制换肤
js换肤 js可控制换肤
JS-12day
1、js操作style属性 2、js操作属性 3、js函数 4、js换肤 5、js换肤可控制 6、js中括号操作属...
HTML5 DOM元素类名添加操作API classList简介
熟知且常用的两种给DOM元素添加类的操作就是原生js中的 className和jQuery中的addClass。...
2018-12-01
js中括号操作属性 js函数 js换肤变量和函数预解析匿名函数函数传参函数return关键字流程控制语句...
js操作属性；js换肤；js可控制换肤；js操作style属性
js操作属性检查：fn+f12 DOM是为了操作文档（网页）的API，document是它的一个对象 BOM是为...
You might not need jQuery——笔记
元素操作jQuery JS jQuery JS jQuery JS element.insertAdjacentH...
个人博客—换肤
个人博客—换肤点击换肤按钮获取后台皮肤列表点击皮肤列表中图片换肤成功 html部分 js部分 php部分 ...
测试scrollTop
Chrome： jQuery JS FireFox jQuery JS IE8-9 jQuery JS 综上来看，...
JS操作属性、JS换肤、JS操作style属性、JS操作clas
JS操作属性： JS换肤： JS操作style属性： JS操作class： JS中括号操作属性： JS函数： JS...