JQuery CSS: динамически изменять атрибуты класса

Ответ 1

Использование метода css() изменяет встроенные стили на уже существующие элементы, и вы не можете использовать это для изменения стилей для будущих элементов. Обходной путь (который мне не очень нравится) заключается в том, чтобы вставить тег стиля:

$( "<style>.myClass {background-color : #00FFFF}</style>" ).appendTo( "head" )
$("p").last().after("<div class='myClass'>Now!</div>");

FIDDLE

Ответ 2

Я просто наткнулся на этот вопрос и подумал, что я заберусь, хотя это уже почти год...

Фактически вы можете изменять правила css динамически во время выполнения, как и любой другой элемент DOM. Я не думаю, что jQuery поддерживает его, поэтому вам нужно будет напрямую использовать собственные элементы DOM.

Вы можете назначить заголовки таблицам стилей, чтобы их было легче найти в дереве DOM, но с небольшим предубеждением обычно не так сложно найти нужные правила. Вот краткий пример из jsfiddle, основанный на вашем примере.

function getStyleRule(name) {
  for(var i=0; i<document.styleSheets.length; i++) {
    var ix, sheet = document.styleSheets[i];
    for (ix=0; ix<sheet.cssRules.length; ix++) {
        if (sheet.cssRules[ix].selectorText === name)
            return sheet.cssRules[ix].style;
    }
  }
return null;
}

var rule = getStyleRule('.myClass');
rule.backgroundColor = '#0ff';

$("p").last().after("<div class='myClass'>Now!</div>");

Вот скрипка, в которой показан ваш пример, обновленный для изменения самого правила CSS: http://jsfiddle.net/93wGJ/5/

Подробнее о DOM для таблиц стилей см. http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html

Ответ 3

Попробуйте внести изменение цвета в функцию:

function colorChange() {
     $(".myClass").css("background-color", "#00FFFF");
}

И назовите его "при загрузке" и после того, как вы что-то изменили с помощью jQuery.

Ответ 4

Я бы сделал что-то вроде ниже. Он не изменяет класс, но он делает то, что вам нужно.

$("body").addClass("updatedClass");
$("p").last().after("<div class='myClass'>Now!</div>");

и css:

.myClass{
    background-color: #ffff00;    
}
.updatedClass .myClass {
    background-color: #00FFFF;    
}

Демо

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

Или вы можете использовать файлы cookie (установите флажок jquery cookie для более простого доступа к куки файлам на стороне клиента) и измените класс с помощью вставки тега стиля или добавление соответствующего класса в тело в jQuery.ready обратном вызове.

например, с помощью файлов cookie (с использованием плагина, упомянутого выше) код может выглядеть следующим образом:

$("body").addClass("updatedClass");
$("p").last().after("<div class='myClass'>Now!</div>");
$.cookie('baseClass', 'updatedClass'); // set class for current session (this cookie will be deleted after user ends his session)

и чем, каждая страница должна иметь:

$(function() {
   if($.cookie('baseClass') != null) {
        $("body").addClass($.cookie('baseClass'));// or style tag could be added here instead.
   }
})

Ответ 5

Попробуйте следующее: http://jsfiddle.net/tRqBV/5/

$(function () {
   $(".myClass").css("background", "green");
   $("p").last().after("<div class='myClass'>Now!</div>");

   $(document).ready(function () {
    $('div.myClass').css("background", $('p.myClass').first().css('background-color'));
   });
});

Ответ 6

У меня была такая же цель, я использую хэши + ajax для наборов записей навигации, и мне нужно было легко сохранить предпочтения наборов записей. (Мне нужны ссылки на съемные, если пользователь предпочитает перемещаться по записям со ссылками или невидимыми, если они выбрали).

Ответ DaveInMaine велик, но я немного беспокоюсь о обратной совместимости, поэтому я стремился к простому решению.

Поименовав мою таблицу, статический элемент recordTable, предоставив ему класс LinksOn, и я могу использовать стилистические селектора типа #recordTable.LinksOn a и #recordTable.LinksOff a с отображением, установленным в none, и использовать простой javascript, например

javascript:$('#recordTable').toggleClass('LinksOn').toggleClass('LinksOff');

Сохраняя последний класс в переменной в cookie, сеансе на стороне сервера через ajax или localStorage, я могу сохранить его между сеансами, если мне нравится.

Я мог бы сделать все это с помощью одного класса (#recordtable и #recordtable.on, а не on и off), но я решил сохранить его таким образом.

Ответ 7

В дополнение к тому, что было сказано, я думаю, было бы бесполезно модифицировать правило css, потому что уже существующие элементы не будут изменены.

<style>
.myclass{
font-size:25px;
}
</style>

<div class="myclass">I am here </div>

Теперь, если вы каким-то образом измените класс "myclass" itselef, это не повлияет на "Я здесь", потому что это не связано динамически. Возможно, это повлияет на вновь созданные элементы.