使用 Javascript 保留 CSS 样式答案

【问题标题】：Preserving CSS styles with Javascript使用 Javascript 保留 CSS 样式
【发布时间】：2010-05-19 04:24:19
【问题描述】：

我有一个网络服务，人们可以在其中编辑他们的页面 CSS，但我在该页面的页脚上有一个栏，我想在每个页面上都保持一致...

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

【问题讨论】：

标签： javascript jquery css styling

【解决方案1】：

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

$（窗口）.load（函数（）{ $("#footer").css("可见性", "可见"); });

您还可以考虑使用!important 规则来胜过用户可编辑样式表中的样式。

【讨论】：

啊，你打败了我 :) 但他们不仅可以使用可见性，还可以使用负数 text-indent、display:none 或使文本颜色透明或与背景相同.
这些技术要求您设置每个要保护的属性（您可能不想这样做），并且依赖于特异性和 !important，这两者都不可靠。此外，它们依赖于 javascript，而您确实不需要强大的解决方案。

【解决方案2】：

如果您在保存时修改了用户创建的 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之外。

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

【讨论】：

这其实是一个非常有趣的解决方案！谢谢老兄！

【解决方案3】：

您可以在 iframe 中加载栏。

【讨论】：

【解决方案4】：

你可以尝试两种方法：

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

【讨论】：

他们以后总能弄清楚页面的结构，并且不一定需要直接使用 id 或类来定位栏。
一个足够聪明的人总是能够禁用或隐藏页面的任何部分，无论你做什么。你听说过 Firefox 的 Greasemonkey 或 Stylish 插件吗？
另外，我不久前问过这个关于允许用户添加自己的样式表的问题......您应该注意一些安全问题：stackoverflow.com/questions/1534012/…
fudgey，这不是聪明人在自己的机器上做任何他们想做的事，而是所有人都可以在全球范围内访问的网站页面。您可以隐藏/删除 facebook 包装器，并让所有应用程序在您自己的机器上全屏运行，但如果脚本/css 执行此操作以便应用程序对所有用户全屏运行，那么 facebook 就会出现大问题。
这些技术都不是很可靠。如果你依赖 !important，你需要定义你想要保护的每个样式属性 - !important 可以（部分）保护你设置的样式，但它不能保护没有设置的样式。使用脚本添加的元素可以使用 CSS 定位，无论您是否给它们提供 ID 和类。此外，您希望能够自己设计样式，对吗？