使用Java脚本保留CSS样式

Question

我有一个Web服务，人们可以在其中编辑他们的页面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其所有规则中添加#userEditableArea ，因此它们仅适用于<div id="userEditableArea">内的元素。 使用一两个正则表达式可以很容易地做到这一点。

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

您不希望它们惹的任何麻烦，请放在#userEditableArea之外。

这应该非常健壮-比使用！important规则或高特定性选择器要强得多，并且不需要任何JS。

Answer 4

您可以尝试两种方法：

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

使用Java脚本保留CSS样式

问题描述

4 个解决方案

解决方案1
2 2010-05-19 04:41:37

解决方案2
1 2010-05-19 05:10:59

解决方案3
1 已采纳 2010-05-19 18:01:49

解决方案4
-1 2010-05-19 04:42:26

使用Java脚本保留CSS样式

问题描述

4 个解决方案

解决方案1 2 2010-05-19 04:41:37

解决方案2 1 2010-05-19 05:10:59

解决方案3 1 已采纳 2010-05-19 18:01:49

解决方案4 -1 2010-05-19 04:42:26

解决方案1
2 2010-05-19 04:41:37

解决方案2
1 2010-05-19 05:10:59

解决方案3
1 已采纳 2010-05-19 18:01:49

解决方案4
-1 2010-05-19 04:42:26