Maison  >  Article  >  interface Web  >  Comment ajouter un nom de classe aux éléments dans jquery

Comment ajouter un nom de classe aux éléments dans jquery

WBOY
WBOYoriginal
2021-11-23 09:34:003551parcourir

Comment ajouter un nom de classe à un élément dans jquery : 1. Utilisez l'instruction "$(element)" pour faire correspondre l'objet de l'élément ; 2. Utilisez la méthode addClass() pour ajouter un nom de classe à l'élément. élément object.addClass(" classname")".

Comment ajouter un nom de classe aux éléments dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.0, ordinateur Dell G3.

Comment ajouter un nom de classe à un élément avec jquery

1 Créez une nouvelle page html, puis ajoutez un bouton avec le texte

événement au bouton.

Code HTML :

<div id="add">点击按钮添加class</div>
<input type="button" value="添加class" onclick="addBtn()" />

Ajouter un style de classe. Créez une balise

code CSS :

<style>
.fs40{
font-size: 40px;
}
</style>

2. Présentez la bibliothèque jquery. Introduisez une bibliothèque jquery après la balise

code js :

<script type="text/javascript">
function addBtn(){
$("#add").addClass("fs40")
}
</script>

Enregistrez la page de code html, puis ouvrez-la avec un navigateur, cliquez sur l'icône du bouton, vous verrez que la police de la balise

.

Tous les codes sur la page. Vous pouvez directement copier tout le code, le coller dans une nouvelle page HTML, modifier le chemin d'introduction de la bibliothèque jquery, enregistrer le code HTML et l'ouvrir avec un navigateur, puis cliquer sur le bouton pour voir l'effet.

Tous les codes :






<style>
.fs40{
font-size: 40px;
}
</style>

<script type="text/javascript">
function addBtn(){
$("#add").addClass("fs40")
}
</script>


<div id="add">点击按钮添加class</div>
<input type="button" value="添加class" onclick="addBtn()" />

Résultats de sortie :

Comment ajouter un nom de classe aux éléments dans jquery

Recommandations de didacticiels vidéo associés : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn