web-dev-qa-db-fra.com

Comment changer un style de classe css via Javascript?

Selon le livre que je lis, il est préférable de changer un css, par classe, lorsque vous utilisez Javascript pour changer de css Mais comment? Quelqu'un peut-il donner un extrait de code pour cela?

javascripthtmlcss
42
sasori

Supposons que vous ayez:

<div id="mydiv" class="oldclass">text</div>

et les styles suivants:

.oldclass { color: blue }
.newclass { background-color: yellow }

Vous pouvez changer la classe sur mydiv en javascript comme ceci:

document.getElementById('mydiv').className = 'newclass';

Après la manipulation du DOM, il vous restera:

<div id="mydiv" class="newclass">text</div>

Si vous souhaitez ajouter une nouvelle classe css sans supprimer l'ancienne, vous pouvez l'ajouter:

document.getElementById('mydiv').className += ' newClass';

Cela se traduira par:

<div id="mydiv" class="oldclass newclass">text</div>
63
Asaph

Puisque classListest pris en charge par tous les principaux navigateurs et , jQuery supprime la prise en charge de IE <9 (dans la branche 2.x sous Stormblack dans le commentaire)

<div id="mydiv" class="oldclass">text</div>

vous pouvez facilement utiliser cette syntaxe:

document.getElementById('mydiv').classList.add("newClass");

Cela se traduira également par:

<div id="mydiv" class="oldclass newclass">text</div>

de plus, vous pouvez également utiliser remove, toggle, contient method.

12
Jan Turoň

Je recommande fortement jQuery. Cela devient alors aussi simple que:

$('#mydiv').addClass('newclass');

Vous n'avez pas à vous soucier de supprimer l'ancienne classe, car addClass () ne fera que l'ajouter. Vous avez également removeClass ();

L’autre avantage de la méthode getElementById () est que vous pouvez l’appliquer à plusieurs éléments en même temps avec une seule ligne de code.

$('div').addClass('newclass');
$('.oldclass').addClass('newclass');

Le premier exemple ajoutera la classe à tous les éléments DIV de la page. Le deuxième exemple ajoutera la nouvelle classe à tous les éléments qui ont actuellement l'ancienne classe.

10
Andy Shellam

utilisez la propriété className:

document.getElementById('your_element_s_id').className = 'cssClass';
5
knittl

Pour ce faire, vous pouvez utiliser javascript dans Vanilla de deux manières. Le premier est className et le second est classList. className fonctionne dans tous les navigateurs mais peut être difficile à manipuler lors de la modification de l'attribut de classe d'un élément. classList est un moyen plus facile de modifier les classes d'un élément.

Pour définir directement l'attribut class d'un élément, vous devez utiliser className; sinon, pour modifier la ou les classes d'un élément, il est plus facile d'utiliser classList.

Html initial

<div id="ID"></div>

Définition de l'attribut de classe

var div = document.getElementById('ID');
div.className = "foo bar car";

Résultat:

<div id="ID" class="foo bar car"></div>

Ajouter une classe

div.classList.add("car");// Class already exists, nothing happens
div.classList.add("tar");

Note: Il n'est pas nécessaire de vérifier si une classe existe avant de l'ajouter. Si une classe doit être ajoutée, ajoutez-la simplement. S'il existe déjà, un duplicata ne sera pas ajouté.
Résultat:

<div id="ID" class="foo bar car tar"></div>

Supprimer une classe

div.classList.remove("car");
div.classList.remove("tar");
div.classList.remove("car");// No class of this name exists, nothing happens

Note: Tout comme add, si une classe doit être supprimée, supprimez-la. S'il est là, il sera supprimé, sinon rien ne se passera.
Résultat:

<div id="ID" class="foo bar"></div>

Vérifier si un attribut de classe contient une classe spécifique

if (div.classList.contains("foo")) {
  // Do stuff
}

Basculer une classe

var classWasAdded = div.classList.toggle("bar"); // "bar" gets removed
// classWasAdded is false since "bar" was removed

classWasAdded = div.classList.toggle("bar"); // "bar" gets added
// classWasAdded is true since "bar" was added

.toggle a un second paramètre boolean qui, à mon avis, est redondant et ne mérite pas d'être dépassé.

Pour plus d'informations sur classList, consultez MDN . Il couvre également la compatibilité du navigateur s’il s’agit d’un problème, qui peut être résolu en utilisant Modernizr pour la détection et un remplissage multiple au besoin.

4
nwayve

Si vous voulez manipuler la classe CSS réelle au lieu de modifier les éléments DOM ou d'utiliser des classes CSS de modificateur, voir https://stackoverflow.com/a/50036923/482916 .

1
gmoz22

Vous pouvez également être intéressé par une modification à l’aide de jQuery: http://api.jquery.com/category/css/

1
Juri
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("div").addClass(function(){
            return "par" ;
    });
});
</script>
<style>
.par {
    color: blue;
}
</style>
</head>
<body>
<div class="test">This is a paragraph.</div>
</body>
</html>
0
chanakya s