jquery - 如何公开 css 以在小部件上进行配置

Question

我正在尝试构建一组小部件，允许每个客户端在其页面上配置样式。

有没有办法公开类、ID 或允许客户端修改样式的东西？我尝试覆盖!important但似乎没有用

标签： jquerycsswidget

Answer 1

生病从这个开始。您不需要使用!important来覆盖默认样式。您需要检查两件事以使 CSS 覆盖优雅地工作。

1. 覆盖样式表结构正确。如果您的默认样式表使用 定义了规则.wrapper > .my-container，则覆盖不能只定义规则.my-container（默认样式是更强的规则，并且将优先于覆盖样式表）。您必须在覆盖样式表中覆盖相同的类结构。
2. 覆盖样式包含在默认样式表之后。

在如何应用自定义客户端样式方面，假设您希望保存和加载这些样式而不是短暂的，有几个选项。

一种是允许客户端自定义变量，如十六进制值、宽度等。然后，您可以将这些 CSS 值存储在数据库中，并为该客户端提供覆盖这些类的自定义样式表。这里的缺点是客户端可能会存储看起来很糟糕或破坏事物的值，例如白色文本上的白色（需要验证）。

另一种选择是生成一组预设类或“主题”（例如，一个用于紫色，另一个用于黄色，一个用于大尺寸小部件，一个用于小部件等）。然后只需存储客户端选择的选项并在前端以编程方式应用它。这不需要相同的验证、提供自定义样式表或需要在数据库中存储 CSS 字符串，但会在一定程度上限制客户的选择。