Classes et méthodes jQuery-CSS
jQuery - Obtenir et définir des classes CSS
jQuery Manipulate CSS
jQuery Dispose de plusieurs méthodes pour effectuer des opérations CSS. Nous apprendrons ce qui suit :
addClass() - Ajouter une ou plusieurs classes à l'élément sélectionné
removeClass() - Supprimer une ou plusieurs classes de l'élément sélectionné
toggleClass() - Ajouter/supprimer une opération de changement de classe pour les éléments sélectionnés
css() - Définir ou renvoyer les attributs de style
Feuille de style d'instance
ci-dessous La feuille de style sera utilisée pour tous les exemples sur cette page :
.important{
font-weight:bold;
font-size:xx-large;
}.
blue{
color:blue;
}Méthode jQuery addClass()
Les exemples suivants montrent 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 :
<!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>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
</html>Vous pouvez également spécifier plusieurs classes dans la méthode addClass() :
<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>Méthode jQuery removeClass()
L'exemple suivant montre comment supprimer l'attribut de classe spécifié dans différents éléments :
<!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>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>从元素中移除 class</button>
</body>
</html> a l'effet inverse de addclass.
Méthode jQuery toggleClass()
Fonction de changement d'attribut :
<!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>Méthode jQuery css()
Paramètre de la méthode css() Ou renvoie une ou plusieurs propriétés de style de l'élément sélectionné.
Renvoyer les propriétés CSS
Pour renvoyer la valeur d'une propriété CSS spécifiée, veuillez utiliser la syntaxe suivante :
css("propertyname");
Définir les propriétés CSS
Pour définir des propriétés CSS spécifiques, veuillez utiliser la syntaxe suivante :
css("propertyname","value");
Définir plusieurs propriétés CSS
Pour définir plusieurs propriétés CSS, veuillez utiliser la syntaxe suivante :
css({"propertyname":" value" ,"propertyname": "valeur",...});
<!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(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个例子</p>
<p style="background-color:#00ff00">这是一个例子</p>
<p style="background-color:#0000ff">这是一个例子</p>
<p>这是一个例子</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>
section suivante