如果简单的可以加载不同的css就行了。
如果复杂点的话就要更改html结构了。

仅仅是背景颜色，布局的不同，html改动不大，那就直接使用js更改容器的id名，以及操作DOM。

比如原来的 是

<p class="containerA">
    <span>test<span>
</p>

更改主体则更改容器的名称。

<p class="containerB">test</p>

css中可以写两套css代码，一次加载。

.containerA span{
    background-color:red;
}
.containerB span{
    background-color:red;
}

【版本风格】说明并不是单一的某个模块，而是大部分的Css布局都需要换。

方法1：
简易做法，提前备好一堆class，绑定点击事件更换className。代码如下：
btn[0].onclick = function(){
    p.className = 'newclass';
}

方法2:
更简易做法：直接更换link的href。代码如下：
btn[0].onclick = function(){
    lin.href = './1.css';
}
btn[1].onclick = function(){
    lin.href = './2.css';
}

动态生成 装饰类吧 然后序列化存起来，这样比较可行
比如你页面大致分为个版块 header body nav container footer 自己划分一下吧
这样做灵活性应该能满足你的要求，你就当成是拼拼图就行了

利用样式重写原则，切换风格的时候动态给body添加不同的样式