создать класс CSS на лету в коде позади - PullRequest
Новая
       8

создать класс CSS на лету в коде позади

1 голос
/ 04 августа 2010

У меня есть страница поиска, которая используется в нескольких местах с несколькими «темами» на всем моем сайте.У меня есть несколько div, которые могут менять цвет фона в зависимости от выбора переключателя (независимо от того, включены они или нет).Я могу сделать это очень хорошо, изменяя класс CSS на лету с помощью JavaScript.

Однако эти темы могут потенциально измениться, и цвет фона будет выбран из базы данных при создании страницы.Прямо сейчас я делаю это в коде C #: 

string bgStyle = "background-color:" +theme.searchTextHeaderColor +";";
OwnerSearchHeader.Attributes.Add("style", bgStyle);

В Javascript мне нужно изменить этот цвет, чтобы он выглядел отключенным, и когда пользователь щелкает обратно к этому div, мне нужно включить егоизменив его обратно в исходный цвет.Но так как я знал только этот цвет в коде позади, я не знаю, что это было в Javascript.

Поэтому я подумал о том, чтобы создать класс css на получившейся HTML-странице, когда страница загружается с нужным мне цветом фона.Тогда я мог бы просто переключиться с классов divEnabled и divDisabled в JavaScript.Но я не совсем уверен, как это сделать.

В качестве альтернативы я мог бы создать скрытый элемент, назначить ему стиль 'enabled' и использовать его в качестве ссылки в JavaScript при включении моего div.Это похоже на взлом, но, возможно, это самый простой способ.Я все еще плохо знаком с этим, поэтому буду признателен за любые предложения.Спасибо за вклад!

Ответы [ 2 ]

2 голосов
/ 04 августа 2010

Поэтому я подумал о том, чтобы создать класс CSS на получившейся HTML-странице, когда страница загружается с нужным мне цветом фона.Тогда я мог бы просто переключиться с классов divEnabled и divDisabled в JavaScript.Но я не совсем уверен, как это сделать.

Да, это ответ;сделай это.В <head> вашего документа добавьте <style> и вставьте туда свой CSS следующим образом: (мой Asp.NET немного ржавый, так что извините, если у него есть некоторые ошибки;)) 

<style>
    <!--
    .divEnabled {
        background-color:<%=theme.searchTextHeaderColor%>;
    }
    .divDisabled {
        background-color:gray; /* or wtv */
    }
    -->
</style>

Вы также можете поместить его во внешний CSS-файл, что может быть хорошей идеей.

Затем напишите немного JavaScript для добавления / удаления атрибута класса (я собираюсь попросить вас don 'Это вызов CSS-класса ;)) 

var ownersearchheader = document.getElementById("<%=OwnerSearchHeader.ClientId%>");
// changing the class attribute to `divDisabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivEnabled\b/, "divDisabled")
ownersearchheader.setAttribute("class", newClassAttribute);
// ... or,
// changing the class attribute to `divEnabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivDisabled\b/, "divEnabled")
ownersearchheader.setAttribute("class", newClassAttribute);

Это действительно просто, поэтому, как говорит @Haydar, вы можете использовать jQuery, который предлагает простой-как-пирогaddClass(), removeClass() и toggleClass() методы.

0 голосов
/ 04 августа 2010

Вы можете использовать метод jquery .toggleClass.

Описание: Добавить или удалить один или несколько классов из каждого элемента в наборе совпадающих элементов в зависимости от наличия класса или значения аргумента switch.

Вот ссылка на API-документ. API Jquery

...