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

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



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



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



.red {background: red;}


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



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



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


это повлияет на элементы, которые прямо сейчас имеют класс red. До сих пор все в порядке.
Но если я делаю AJAX-вызов, и вставить несколько дивов с red класс, у них не будет зеленого фона, у них будет начальный red фон.



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

624   8  

8 ответов:

вы не можете изменить свойства 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);
    }
}

приведенный выше пример скопирован из:

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

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

пример кода копируется из этот JSFiddle скрипка изначально ссылается Альваро в своем комментарии.

32  
2017-05-23 14:47:17

Если вы не можете использовать разные таблицы стилей, динамически загружая их, вы можете использовать эту функцию для изменения класса 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".

15  
2015-04-15 10:07:14

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

<div class="rotation"> <!-- Set the container div's 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

7  
2016-03-09 03:55:37

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

$(document).ready(function(){
    $('#div').removeClass('left').addClass('right');
});
6  
2013-07-23 13:22:17

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

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

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

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

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

1  
2013-11-07 05:09:03

вот немного улучшения в отличном ответе, предоставленном Мэтью Вольфом. Он добавляет основной контейнер в качестве тега стиля к элементу 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");
}
0  
2014-11-27 03:17:22

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

0  
2015-02-08 13:28:23

$(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 этот объект таблицы стилей, у него есть некоторые интересные свойства/методы.

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

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

вот пример:

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

0  
2015-07-27 21:11:36

Comments

    Ничего не найдено.
Click here to cancel reply.