Preserving CSS styles with Javascript
I have a web service where people can edit their pages CSS, but I have a bar on the footer of that page that I want to make consistend on every page...
People are, right now, able to "remove" it with CSS and I really didn't want to go and parse the CSS to remove rules related to that ba开发者_如何学Pythonr... Is there a way to preserve the styles or re-aply them after load to keep the bar always visible?
The jquery css method lets you set css properties. If you set any properties you want to enforce on the window load, they should override what was set in the css files.
$(window).load(function () {
$("#footer").css("visibility", "visible");
});
You might also look at using an !important rule, to trump the styles in the user editable style sheet.
If you modify the user-created CSS as you save it; adding descendant selectors to all their rules, you can limit the effect of their styles to an element of your choosing. If you take this 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>
The user creates the following stylesheet, trying to hide your footer:
h2 {font-size:2em;}
p {font-color:#333;}
#footerBar {display:none;}
When the user saves their styles, you parse through and add #userEditableArea to all of their rules, so they only work on elements inside <div id="userEditableArea">. This should be pretty easy to accomplish with a regex pass or two.
#userEditableArea h2 {font-size:2em;}
#userEditableArea p {font-color:#333;}
#userEditableArea #footerBar {display:none;}
Anything you don't want them to mess with, put outside of #userEditableArea.
This should be pretty robust - more so than using !important rules or high-specificity selectors, and doesn't require any JS.
You could load the bar in an iframe.
You could try two methods:
- Use the
!importantflag in your CSS - Add the bar using script, which means you are adding it and its style after the page has loaded. But don't use an ID or class name, so they can't target it easily with CSS.
加载中,请稍侯......
精彩评论