Classes et méthodes jQuery-CSS
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>這是另外一個(gè)段落。</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">我會(huì)變哦</div>
<div id="div2">為什么我不行呢</div>
<br>
<button>為第一個(gè) 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>這是另外一個(gè)段落。</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">標(biāo)題 1</h1>
<h2 class="blue">標(biāo)題 2</h2>
<p class="blue">這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</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>這是一個(gè)標(biāo)題</h2>
<p style="background-color:#ff0000">這是一個(gè)例子</p>
<p style="background-color:#00ff00">這是一個(gè)例子</p>
<p style="background-color:#0000ff">這是一個(gè)例子</p>
<p>這是一個(gè)例子</p>
<button>為 p 元素設(shè)置多個(gè)樣式</button>
</body>
</html>
