我有一个网络服务,人们可以在其中编辑他们的页面 CSS,但是我在该页面的页脚上有一个栏,我想在每个页面上都保持一致......
人们现在可以用 CSS “删除”它,我真的不想去解析 CSS 以删除与该栏相关的规则......有没有办法保留样式或重新应用它们加载后保持栏始终可见?
我有一个网络服务,人们可以在其中编辑他们的页面 CSS,但是我在该页面的页脚上有一个栏,我想在每个页面上都保持一致......
人们现在可以用 CSS “删除”它,我真的不想去解析 CSS 以删除与该栏相关的规则......有没有办法保留样式或重新应用它们加载后保持栏始终可见?
jquery css方法允许您设置 css 属性。如果您设置任何要在窗口加载时强制执行的属性,它们应该覆盖在 css 文件中设置的内容。
$(窗口).load(函数(){ $("#footer").css("可见性", "可见"); });
您还可以考虑使用!important规则来超越用户可编辑样式表中的样式。
您可以在 iframe 中加载栏。
如果您在保存时修改用户创建的 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。
您可以尝试两种方法:
!important
标志