2010-02-24 11 views
9

Une classe CSS jQuery définit les éléments suivants:comment remplacer une classe en utilisant jquery

.newwidget { border: 1px solid #5a9ee9; background: #5a9ee9 url(t6.gif) 50% 50% repeat-x; color: #ffffff; font-weight: bold; text-transform: uppercase; padding:3px 3px 3px 10px; font-size:10px} 

Comment cette classe peut être surchargée et une nouvelle classe ajouté afin que je puisse mettre des styles différents en elle? Peut-être que je dois supprimer avant les cours avant de les ajouter. Comment cela est-il fait?

Merci

+0

Essayez-vous de redéfinir newwidget afin que tous les éléments de cette classe aient un nouveau style? Ou essayez-vous de changer la classe d'un élément existant? –

+1

Juste pour que vous sachiez, tout en supprimant l'ancienne classe est une option, il n'est pas nécessaire. S'il y a des styles dans l'ancien que vous voulez utiliser, utilisez simplement 'addClass()', ce qui 'améliorera' l'élément avec les styles de la nouvelle classe. Sinon, utilisez les solutions indiquées ci-dessous. – user113716

+0

Merci .............................. – Hulk

Répondre

15

Utilisez le sélecteur de classe avec addClass et removeClass.

$('.newwidget').removeClass('newwidget').addClass('newerwidget'); 
4

Vous pouvez à remove l'ancienne classe et add une nouvelle:

$myJQObject.removeClass('newwidget').addClass('newclass'); 
6

jQuery définit addClass() et removeClass() uniquement dans ce but:

$("#ElementId").removeClass('oldClassName').addClass('newClassName'); 

Les deux fonctions ne sont à l'évidence . Enchaînez-les comme ceci pour changer la classe en une seule action.

Si vous souhaitez modifier tous les éléments de « oldClass » à « NewClass », vous pouvez utiliser un sélecteur comme celui-ci:

$(".oldClassName").removeClass('oldClassName').addClass('newClassName'); 
+0

Merci pour l'explication – Hulk

2
$(this).removeClass('oldClass').addClass('newClass'); 
2

Je pense qu'il est intéressant de noter que vous pouvez supprimer tous les les classes en laissant hors le paramètre de removeClass():

$('.newwidget').removeClass().addClass('newerwidget'); 
1

Si vous cherchez à remplacer complètement les classes existantes sur un élémen t, vous pouvez utiliser la méthode .attr().

$('#elementId').attr('class', 'newClassName'); 

Toutes les classes sur elementId seront remplacées.

Questions connexes