Изменение свойств класса CSS с помощью jQuery

Есть ли способ изменить свойства класса CSS, а не свойства элемента, используя jQuery?

Это практический пример:

У меня есть div с классом red

.red {background: red;}

Я хочу изменить свойство фона red, а не элементы, которые имеют класс red.

Если я делаю это с помощью jQuery . Метод css():

$('.red').css('background','green');

это повлияет на элементы, которые теперь имеют класс red. Здесь все нормально. Но если я сделаю вызов Ajax и добавлю больше div с классом red, у них не будет зеленого фона, у них будет исходный фон red.

Я могу снова вызвать jQuery . css() method. Но я хотел бы знать, есть ли способ изменить сам класс. Пожалуйста, подумайте, что это всего лишь базовый пример.

Ответ 1

Вы не можете напрямую изменять свойства CSS с помощью jQuery. Но вы можете добиться такого же эффекта, по крайней мере, двумя способами.

Динамическая загрузка CSS из файла

function updateStyleSheet(filename) {
    newstylesheet = "style_" + filename + ".css";

    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        css = $("head").children(":last");

        css.attr({
          id: "dynamic_css",
          rel:  "stylesheet",
          type: "text/css",
          href: newstylesheet
        });
    } else {
        $("#dynamic_css").attr("href",newstylesheet);
    }
}

Приведенный выше пример копируется из:

Как переключить файлы CSS на лету с помощью jQuery

Динамическое добавление элемента стиля

$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');

Код примера скопирован из эта скрипта JSFiddle, на которую ссылается Alvaro в своем комментарии.

Ответ 2

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

function changeCss(className, classValue) {
    // we need invisible container to store additional css definitions
    var cssMainContainer = $('#css-modifier-container');
    if (cssMainContainer.length == 0) {
        var cssMainContainer = $('<div id="css-modifier-container"></div>');
        cssMainContainer.hide();
        cssMainContainer.appendTo($('body'));
    }

    // and we need one div for each class
    classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
    if (classContainer.length == 0) {
        classContainer = $('<div data-class="' + className + '"></div>');
        classContainer.appendTo(cssMainContainer);
    }

    // append additional style
    classContainer.html('<style>' + className + ' {' + classValue + '}</style>');
}

Эта функция принимает любое имя класса и заменяет любые ранее установленные значения новым значением. Обратите внимание: вы можете добавить несколько значений, передав следующее в classValue: "background: blue; color:yellow".

Ответ 3

Не нашел ответ, который я хотел, поэтому решил сам: изменить контейнер div!

<div class="rotation"> <!-- Set the container div css -->
  <div class="content" id='content-1'>This div gets scaled on hover</div>
</div>

<!-- Since there is no parent here the transform doesnt have specificity! -->
<div class="rotation content" id='content-2'>This div does not</div>

css, который вы хотите сохранить после выполнения $target.css()

.content:hover {
    transform: scale(1.5);
}

изменить содержимое, содержащее div с помощью css()

$(".rotation").css("transform", "rotate(" + degrees + "deg)");

пример Codepen

Ответ 4

Вы можете удалить классы и динамически добавлять классы

$(document).ready(function(){
    $('#div').removeClass('left').addClass('right');
});

Ответ 5

Вы можете добавить класс к родительскому элементу красного div, например. зеленый стиль

$('.red').parent().addClass('green-style');

затем добавьте стиль в css

.green-style .red {
     background:green; 
}

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

Ответ 6

Вот немного улучшения в превосходном ответе, предоставленном Мэтью Вольфом. Это добавляет основной контейнер в качестве тега стиля к элементу head и добавляет каждый новый класс к этому тегу стиля. немного более кратким, и я считаю, что он работает хорошо.

function changeCss(className, classValue) {
    var cssMainContainer = $('#css-modifier-container');

    if (cssMainContainer.length == 0) {
        var cssMainContainer = $('<style id="css-modifier-container"></style>');
        cssMainContainer.appendTo($('head'));
    }

    cssMainContainer.append(className + " {" + classValue + "}\n");
}

Ответ 7

Вы можете использовать другой подход: вместо того, чтобы динамически изменять css, предопределите свои стили в CSS так, как вы хотите. Затем используйте JQuery для добавления и удаления стилей из Javascript. (см. код от Ajmal)

Ответ 8

$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);

styleSheetIndex - это значение индекса, которое соответствует заказу, который вы загрузили в файл <head> (например, 0 - это первый файл, 1 - следующий и т.д., если есть только один файл CSS, используйте 0),

rule - это правило CSS в текстовой строке. Например: "body { display:none; }".

lineIndex - номер строки в этом файле. Чтобы получить последний номер строки, используйте $(document)[0].styleSheets[styleSheetIndex].cssRules.length. Просто console.log этот объект styleSheet получил некоторые интересные свойства/методы.

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

В некоторых браузерах после манипулирования файлом CSS вам нужно заставить CSS "перерисовать", вызвав какой-то бессмысленный метод в DOM JS, например document.offsetHeight (он абстрагируется как свойство DOM, а не метод, поэтому не нужно use "()" ) - просто добавив, что после того, как ваша манипуляция CSSOM заставит страницу перерисовывать в старых браузерах.

Итак, вот пример:

var stylesheet = $(document)[0].styleSheets[0]; stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);