Сохранение стилей CSS с помощью Javascript - PullRequest
Новая
       11

Сохранение стилей CSS с помощью Javascript

0 голосов
/ 19 мая 2010

У меня есть веб-сервис, где люди могут редактировать свои страницы CSS, но у меня есть полоса в нижней части этой страницы, которую я хочу сделать согласованной на каждой странице ...

Люди прямо сейчас могут "удалить" его с помощью CSS, и я действительно не хотел идти и анализировать CSS, чтобы удалить правила, связанные с этой панелью ... Есть ли способ сохранить стили или повторно -применить их после загрузки, чтобы панель всегда была видна?

Ответы [ 4 ]

2 голосов
/ 19 мая 2010

Метод jquery css позволяет вам установить свойства css. Если вы устанавливаете какие-либо свойства, которые хотите применить к загрузке окна, они должны переопределять то, что было установлено в файлах css. 

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

Можно также использовать правило ! Important , чтобы превзойти стили в редактируемой пользователем таблице стилей.

1 голос
/ 19 мая 2010

Если вы изменяете созданный пользователем 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.

1 голос
/ 19 мая 2010

Вы можете загрузить панель в iframe.

0 голосов
/ 19 мая 2010

Вы можете попробовать два метода:

  1. Используйте флаг !important в вашем CSS
  2. Добавьте панель с помощью скрипта, что означает, что вы добавляете ее и ее стиль после загрузки страницы. Но не используйте идентификатор или имя класса, поэтому они не могут легко нацеливаться на него с помощью CSS.
...