Question

我有一个网络服务，人们可以编辑他们的页面CSS，但我在页面的页脚上有一个栏，我希望在每个页面上都有... ...

现在，人们可以使用CSS“删除”它，我真的不想去解析CSS以删除与该栏相关的规则...有没有办法保存样式或重新加载后它们是否始终可见？

Answer 1

jquery css方法允许您设置css属性。如果您在窗口加载时设置要强制执行的任何属性，则它们应覆盖在css文件中设置的内容。

$(window).load(function () {
  $("#footer").css("visibility", "visible");
});

您可能还会考虑使用!important规则来破坏用户可编辑样式表中的样式。

Answer 2

您可以在iframe中加载该条。

Answer 3

如果您在保存时修改用户创建的CSS;将后代选择器添加到其所有规则中，您可以将其样式的效果限制为您选择的元素。如果您使用此HTML：

<html>
  <body>
    <div id="userEditableArea">
      <h2>Stylable</h2>
      <p>Users can style this section.</p>
    </div>
    <div id="footerBar">
      Users can't style this section.
    </div>
  </body>
</html>

用户创建以下样式表，尝试隐藏页脚：

h2 {font-size:2em;}
p {font-color:#333;}
#footerBar {display:none;}

当用户保存其样式时，您会解析并将#userEditableArea添加到其所有规则中，因此它们仅适用于<div id="userEditableArea">内的元素。这应该很容易通过一两个正则表达式完成。

#userEditableArea h2 {font-size:2em;}
#userEditableArea p {font-color:#333;}
#userEditableArea #footerBar {display:none;}

任何你不想让它们弄乱的东西，放在#userEditableArea之外。

这应该非常强大 - 比使用！重要规则或高特异性选择器更加强大，并且不需要任何JS。

Answer 4

您可以尝试两种方法：

使用CSS中的!important标志
使用脚本添加栏，这意味着您在页面加载后添加它及其样式。但是不要使用ID或类名，因此无法使用CSS轻松定位它。

使用Javascript保留CSS样式

4 个答案: