jQuery CSS


jQuery - Obtenez et définissez des classes CSS

Avec jQuery, vous pouvez facilement opérer sur des éléments CSS.

jQuery Manipulation CSS

jQuery appartenant Plusieurs façons d'effectuer des manipulations CSS. Nous apprendrons ce qui suit :

  • addClass() - Ajouter une ou plusieurs classes à l'élément sélectionné

  • removeClass() - Supprimer de l'élément sélectionné élément sélectionné Sélectionnez un élément pour supprimer une ou plusieurs classes

  • toggleClass() - effectue une opération de changement de classe d'ajout/suppression sur l'élément sélectionné

  • css( ) - Définir ou renvoyer les propriétés de style

Feuille de style d'instance

La feuille de style suivante sera utilisée pour tous les exemples de cette page :

.important
{
font-weight:bold;
font - taille:xx-large;
}

.bleu
{
couleur:bleu;
}

Méthode jQuery addClass()

L'exemple suivant montre comment ajouter l'attribut class à différents éléments. Bien entendu, lors de l'ajout d'une classe, vous pouvez également sélectionner plusieurs éléments :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Vous pouvez également spécifier plusieurs classes dans la méthode addClass() :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").addClass("important blue");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div>
<br>
<button>为第一个 div 元素添加类</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Méthode jQuery RemoveClass()

L'exemple suivant montre comment supprimer l'attribut de classe spécifié dans différents éléments :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>从元素中移除 class</button>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Méthode jQuery toggleClass()

L'exemple suivant montrera comment utilisez la méthode jQuery toggleClass(). Cette méthode effectue l'opération de commutation d'ajout/suppression de classes sur l'élément sélectionné :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Méthode jQuery css()

Nous expliquerons la méthode jQuery css() dans le chapitre suivant.