开发工具与关键技术：VS   后端

作者：陈芝番                                                                           

撰写时间：2019.6.25

现在所说切换皮肤就是切换框架颜色风格，这里只说三种颜色风格，根据自己喜欢颜色的风格，换颜色的控件的背景色或者字的颜色亦或其他…引用的属性的值就好了。 

九宫肤格切换颜色风格改变源码如下：

颜色风格改变效果：

然后对color_div进行声明，基于class的选择性的性能相对于基于id选择器开销很大，因为其需要遍历所有DOM元素。this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。功能实现部分源码展示：

var colorIndex = 0;

$(function(){

changeColor(colorIndex);

$(".hidden-xs").click(function(){

$("#color_div").hide();

});

$("#color").hover(function(){

$("#color_div").show();

});

$(".color_ul li").each(function(index){

$(this).click(function(){

if(index<5){

changeColor(index)

}else {

changeColor(0)

                 }

            })

       })

});

function changeColor(index){

var logo = $(".logo");

var navbar = $(".skin-blue .main-header .navbar");

            var left_Side = $(".skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side");

            var header = $(".skin-blue .sidebar-menu > li.header");

            var treeview_menu = $(".skin-blue .sidebar-menu > li > .treeview-menu");

            var aa = $(".skin-blue .sidebar-menu > li.active > a");

            var page_tabs_content = $(".content-wrapper .content-tabs .page-tabs .page-tabs-content a");

            if(index==0) {

                logo.addClass("logo1");

                navbar.addClass("navbar1");

                left_Side.addClass("left-side1");

                header.addClass("header1");

                treeview_menu.addClass("treeview-menu1");

                aa.addClass("a0");



                logo.removeClass("logo2");

                navbar.removeClass("navbar2");

                left_Side.removeClass("left-side2");

                header.removeClass("header2");

                treeview_menu.removeClass("treeview-menu2");

                aa.removeClass("a2");

                logo.removeClass("logo3");

                navbar.removeClass("navbar3");

                left_Side.removeClass("left-side3");

                header.removeClass("header3");

                treeview_menu.removeClass("treeview-menu3");

                aa.removeClass("a3");

                logo.removeClass("logo4");

                navbar.removeClass("navbar4");

                left_Side.removeClass("left-side4");

                header.removeClass("header4");

                treeview_menu.removeClass("treeview-menu4");

                aa.removeClass("a4");

                logo.removeClass("logo5");

                navbar.removeClass("navbar5");

                left_Side.removeClass("left-side5");

                header.removeClass("header5");

                treeview_menu.removeClass("treeview-menu5");

                aa.removeClass("a5");}

结语：框架换肤需要用到的知识点，context就是限定查找的范围，context必须是一个DOM元素，context底层还是用了.find()方法来实现的。还有基于class的选择性的性能相对于基于id选择器开销很大，因为其需要遍历所有DOM元素。