web-dev-qa-db-fra.com

jQuery change de classe css en div

Si j'ai un élément div par exemple et que la classe 'first' est définie avec de nombreuses propriétés css. Puis-je assigner la classe css 'seconde' qui a aussi beaucoup de propriétés définies différemment à cette même div juste sur un événement sans écrire chaque propriété en ligne.

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

Si vous souhaitez l'ajouter à un événement, vous pouvez également le faire facilement. Un exemple avec l'événement click:

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

Oui, facilement.

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

Vous pouvez ajouter et supprimer des classes avec jQuery comme suit:

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

À propos, vous pouvez définir plusieurs classes dans votre balisage tout de suite, séparées par un espace.

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

Cela peut ne pas être exactement dans les objectifs, car je ne suis pas tout à fait clair sur ce que vous voulez faire. Cependant, en supposant que vous vouliez affecter une classe différente à une div en réponse à un événement, la réponse est oui, vous pouvez certainement le faire avec jQuery. Je ne suis qu'un débutant jQuery, mais j'ai utilisé les éléments suivants dans mon code:

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

Si vous souhaitez remplacer le premier cours par le second, je pense que vous utiliseriez d'abord removeClass, puis addClass, comme je l'ai fait ci-dessus. toggleClass peut également valoir le coup d'oeil. La documentation de jQuery est bien écrite pour ce type de modifications, avec des exemples.

Quelqu'un d'autre a une meilleure option, mais j'espère que cela aide!

3
Carvell Fenton

Un élément HTML tel que div peut avoir plusieurs classes. Disons que deux styles sont affectés à div en utilisant la méthode addClass. Si style1 a 3 propriétés comme taille de police, poids et couleur et que style2 en a 4, comme taille de police, poids, couleur et couleur d'arrière-plan, les propriétés résultantes définies (style) auront, selon moi, 4 propriétés de tous les ensembles de style. Les propriétés communes, dans notre cas, couleur, taille de police, poids, auront une occurrence avec les dernières valeurs. Si div est affecté à style1 en premier et à style2 en second lieu, les propriétés communes seront remplacées par les valeurs de style2. 

De plus, j’ai écrit un article sur Utilisation de JQuery pour appliquer, supprimer et gérer des styles , j’espère que cela vous aidera.

Cordialement 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