javascript - 允许用户设置 HTML 元素 CSS

Question

客户要求我向 MVC/Bootstrap 网络应用程序添加功能，以允许用户设计他们的门户页面以适合他们公司在表单元素(如按钮、链接等)上的品牌颜色。我不确定如何实现。我的想法是将元素和颜色保存到带有 fk 到 [user] 的数据库表中。然后以某种方式动态创建一个 css 文件并将其保存到本地存储，然后将用户特定的 css 注入(inject)页面 onload。任何帮助/指导将不胜感激。

Answer 1

Scoped CSS 可用于此目的，但浏览器支持不足 目前必须使用选择器进行自己的范围界定。

如果您使用数据库来存储和收集客户数据。 . 并且如果您在客户表中创建一个名为“custom_styles”的字段。 如果您像这样存储一个 css 片段:

    <style scoped type = "text/css">
    #form-container fieldset {
    background: Violet;
    }

    #form-container form header {
    background: url("http://customer.com/customer-logo.png");
    }

    #form-container input {
    margin: 4px;
    border: 2px solid blue;
    }
    </style>

并且如果您将数据存储在 $custom_styles 之类的 php 变量中。 . .

你可以在页面中任何你想要的地方注入(inject)CSS 您想要自定义样式的 block 元素:

<div id = "form_container">
    <?=$custom_styles?>
    <!--  bunch of html  -->
</div>

所以，如果你把它放在装有你想要的表格的容器里 自定义，所有样式将仅应用于该容器。

容器也将继承页面样式，但它们将是 如果在作用域 css 中声明，则覆盖。

页面的其他部分不会受到这些作用域样式的影响。

希望你觉得这很有用。