关于一个页面有多种风格版本的切换

Question

假设我的一个会员中心有多个版本风格，我如何来控制样式的切换和页面布局呢

Answer 1

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

Answer 2

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

比如原来的 是

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

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

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

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

如果是vue 版本的 可以参考我写的；地址：https://github.com/Airubby/vu...

Answer 6

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