Comment modifier dynamiquement la classe CSS de la balise DIV?
Je suis à l'aide de JavaScript. J'ai une variable var boolVal
que soit évalue à vrai/faux.
Sur ma page, j'ai une balise div.
<div id='div1' class="redClass"></div>
Basé sur la valeur de var boolVal
, je veux changer la classe CSS de la balise DIV pour blueClass
.
Par exemple: classe Actuelle rend DIV couleur rouge, alors que la nouvelle classe devrait faire la page de bleu à l'exécution sans avoir besoin de rafraîchir la page.
Pouvons-nous réaliser cela en javascript simple?
Peut-on utiliser
document.getElementById("MyElement").className = "MyClass";
ou devrions-nous utiliser AddClass
?
OriginalL'auteur variable | 2014-03-22
Vous devez vous connecter pour publier un commentaire.
Vous pouvez ajouter une classe css basé sur
id
dynamiquement comme suit:ou à l'aide de
classList
Alternativement, vous pouvez utiliser d'autres méthodes du DOM comme
querySelector
querySelectorAll
getElementsByClassName
getElementsByTagName
etc pour trouver des éléments. Les trois dernières retourner une collection de sorte que vous aurez à parcourir et de l'appliquer à la classe de chaque élément, comme indiqué ci-dessus.
Dans votre cas
OriginalL'auteur
Tout d'abord,
AddClass
n'est pas un pur méthode Javascript. C'est lié à jQuery.Vous pouvez utiliser le Javascript pour ajouter une classe:
setAttribute
etclassName
les deux méthodes sont utilisées pour définir la classe (attribut de classe), ces méthodes ne sont pas utilisés pour l'ajout d'une autre classe avec l'existant.OU
Démo De Violon
Donc, si vous voulez ajouter une classe css à un élément, vous pouvez le faire de cette façon -
OU
Note: l'Utilisation de cette façon, dans la même classe peuvent être ajoutés à de multiples reprises. C'est seulement un truc pour faire ce travail à l'aide de javascript, ce n'est pas une solution parfaite
OU tout simplement utiliser jQuery pour ajouter une classe -
Travail De Violon
OriginalL'auteur
Quelque chose comme ceci:
OriginalL'auteur
Utilisation
className=
va clairement te d'autres classes.obtenu votre point.
OriginalL'auteur
Vous pouvez modifier les styles en ligne sur un élément du DOM comme (la hauteur dans cet exemple):
Syntaxe de base est:
Syntaxe de la propriété de style peut varier et peut-être pas exactement ce que c'est dans un fichier CSS. Par exemple,
background-color
dans un fichier CSS serait 'backgroundColor` dans l'exemple ci-dessus.OriginalL'auteur