javascript - 求用户个性定制皮肤的原理？

Question

想要实现用户可以自定义风格的功能，比如用户可以自己设置边框的颜色、粗细，菜单底色等，风格由用户自己去设计，要怎么去实现，麻烦各位大神给点思路。想过使用不同的CSS文件来进行替换，但是自由度太低了。

Answer 1

如果皮肤形式的, 我想到的和楼上差不多, 通过css不同的Container.class...

如果用户定制的话, 建议提交到后台, 存数据库(user.style字段).
用户登录时读取, 用户保存时(触发保存事件时)update该字段.

Answer 2

之前没有看清问题：

还是没做过，没研究过，不过有想法，不知道是不是正规的做法：

有两个想法：

第一个

如果用户可以自定义的话，样式可以用内联，这样子才能确保样式不会因为优先级被其他的样式覆盖掉。

当用户修改的时候，保存一个selector 和 style的值到数据库中。

等打开页面的时候，再通过js把style添加到对应的dom上

第二个

如果要修改的dom是固定的，那可以给每一个dom上面添加一个data-className之类的东西，就是对应的selector，确保selector的优先级足够。

修改的时候，还是用内联来修改，保存的时候，遍历所有的内联样式，然后用之前的classname来组成一个样式表，保存到数据库里面。

用户打开页面的时候，直接把样式表贴到页面上就行了。

---

至于怎么去修改这么样式。。。想想都头疼。。。不知道网上有没有现成的插件。。。

---

都是想法。。。谨慎参考。。。期待其他人能提供成熟的解决方案。。。

---

之前的答案

没做过，没研究过，不过有想法，不知道是不是正规的做法：

既然不想替换CSS文件，那就通过修改body上面的class来进行样式切换喽，css代码就可以写成下面这种的：

用scss方便点：

/**公用的css**/
button {}
a {}
.title {}

/**针对theme1*/
.theme1 {
  button {}
  a {}
  .title {}
}

/**针对theme2*/
.theme2 {
  button {}
  a {}
  .title {}
}

Answer 3

可以参考一下博客园的方法.
每个用户有一个自定义样式的样式表.
用户自定义的样式放里面, 引入样式的时候,
用户的样式表放默认样式表后面,就可以覆盖默认样式.

Answer 4

我也没做过，只是猜测是不是替换不同的css文件，也就是改变link的href吧

Answer 5

自定义皮肤 建议自己写好配置 让用户选择 而不是这种高自由度的用户自己配置 如果我是用户 我不会浪费时间去搞这个。建议考虑好在做

Answer 6

提供一个想法，以切换CSS 样式， 这个CSS样式是用户设置之后后台生成的！