it-roy-ru.com

jQuery меняет класс CSS на div

Например, если у меня есть один элемент div и класс 'first' определен со многими свойствами CSS. Могу ли я назначить класс css 'second', который также имеет много свойств, по-разному определенных для этого же div, только для некоторого события, не записывая каждое свойство в строку.

47
eomeroff
$(".first").addClass("second");

Если вы хотите добавить его на мероприятие, вы можете сделать это легко. Пример с событием click:

$(".first").click(function() {
    $(this).addClass("second");
});
59
Mark Hurd

Да, легко.

$("#mydiv").attr("class", "second");
88
womp

Вы можете добавлять и удалять классы с помощью jQuery следующим образом:

$(".first").addClass("second")
// remove a class
$(".first").removeClass("second")

Кстати, вы можете сразу установить несколько классов в разметке, разделенных пробелами

<div class="second first"></div>
30
Daff

Это может быть не совсем точно, потому что я не совсем понимаю, что вы хотите сделать. Однако, предполагая, что вы хотите назначить другой класс для div в ответ на событие, ответ - да, вы, безусловно, можете сделать это с помощью jQuery. Я только начинающий jQuery, но я использовал следующее в моем коде:

$(document).ready(function() {
    $("#someElementID").click(function() {  // this is your event
        $("#divID").addClass("second");     // here your adding the new class
    )}; 
)};

Если вы хотите заменить первый класс вторым, я полагаю, что вы сначала будете использовать removeClass, а затем addClass, как я делал выше. toggleClass также стоит посмотреть. Документация jQuery хорошо написана для таких изменений, с примерами.

У кого-то другого есть лучший вариант, но я надеюсь, что это поможет!

3
Carvell Fenton

Элемент HTML, такой как div, может иметь более одного класса. Пусть скажем, что div назначается два стиля, используя метод addClass. Если style1 имеет 3 свойства, такие как font-size, weight и color, а style2 имеет 4 свойства, такие как font-size, weight, color и background-color, результирующий набор эффективных свойств (style), я думаю, будет иметь 4 свойства, т.е. union из всех стилей. Общие свойства, в нашем случае цвет, размер шрифта, вес, будут иметь один случай с последними значениями. Если div назначен style1 первым и style2 вторым, общие значения будут перезаписаны значениями style2. 

Кроме того, я написал сообщение в Использование JQuery для применения, удаления и управления стилями , надеюсь, это поможет вам

С уважением Awais

2
Awais
$(document).ready(function () {

            $("#divId").toggleClass('cssclassname'); // toggle class
});

**OR**

$(document).ready(function() {
        $("#objectId").click(function() {  // click or other event to change the div class
                $("#divId").toggleClass("cssclassname");     // toggle class
        )}; 
)};
0
Virang Maniar