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

标签 jquery css widget

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

有什么方法可以公开类、id 或允许在客户端修改样式的东西吗?我尝试用 !important 覆盖,但似乎没有用

最佳答案

我将从这里开始。您不需要使用 !important 来覆盖默认样式。您需要检查两件事才能使 CSS 覆盖优雅地工作。

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

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

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

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

关于jquery - 如何公开 css 以在小部件上进行配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53527608/

相关文章:

javascript - CSS3 Card Flip 强制整个动画

javascript - 单击透明图像上的 div

android - 在 Corona 小部件中显示在模拟器中但不在设备上

Jquery,如何在初始页面加载时使用一次且仅一次的方法?

javascript - 为什么我的 jquery 删除列表中的第一个元素而不是指定的元素?

Javascript:将链接插入鼠标右键单击?

jquery - 将 jQuery UI CSS 应用于 MVC .input-validation-error

javascript - 使用切换 (jQuery) 更改背景图像

widget - UserVoice 等托管服务如何将其内容嵌入其他网站?

css - 删除 WordPress 中 ConvertKit 表单上的默认样式