jQuery change la classe css en div

Question

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 attribuer la classe css 'second', qui a également de nombreuses propriétés définies différemment, à ce même élément div, juste sur un événement, sans écrire chaque propriété en ligne.

Answer 1

Oui, facilement.

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

Answer 2

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

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

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

Answer 3

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

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

D'ailleurs, vous pouvez définir plusieurs classes dans votre balisage en les séparant par un espace.

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

Answer 4

Il se peut que cela ne corresponde pas exactement à la cible, car je ne comprends pas très bien ce que vous voulez faire. Cependant, si vous voulez dire que vous voulez attribuer une classe différente à un 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 en jQuery, mais j'ai utilisé ce qui suit dans mon code :

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

Si vous vouliez remplacer la première classe par la seconde, je pense que vous utiliseriez d'abord removeClass puis addClass comme je l'ai fait ci-dessus. toggleClass peut aussi valoir le coup. La documentation de jQuery est bien écrite pour ce type de modifications, avec des exemples.

Quelqu'un d'autre peut avoir une meilleure option, mais j'espère que cela vous aidera !

Answer 5

Un élément HTML comme div peut avoir plus d'une classe. Disons que deux styles sont attribués à div à l'aide de la méthode addClass. Si style1 a 3 propriétés comme font-size, weight et color, et style2 a 4 propriétés comme font-size, weight, color et background-color, le jeu de propriétés effectif résultant (style), je pense, aura 4 propriétés, c'est-à-dire l'union de tous les jeux de styles. Les propriétés communes, dans notre cas, color, font-size, weight, auront une occuerance avec les dernières valeurs. Si l'on attribue à la division le style 1 en premier et le style 2 en second, les propriétés communes seront écrasées par les valeurs du style 2.

En outre, j'ai écrit un billet à Utilisation de JQuery pour appliquer, supprimer et gérer les styles J'espère que cela vous aidera.

Salutations Awais