OUJOOD.COM
jQuery méthode css()
La méthode jQuery css() offre un moyen rapide d'appliquer les styles directement aux éléments HTML (c'est-à-dire les styles en ligne) qui n'ont pas été définis ou ne peuvent pas être définis dans une feuille de style.
La méthode jQuery css() a trois syntaxes différentes, pour exécuter des tâches différentes.
- CSS(Nom) - Retourne : valeur de la propriété CSS définie
- CSS(Nom,Valeur) - Retourne : propriété CSS définie et valeur
- CSS({Properties}) - Retourne : la valeur des propriétés CSS et des valeurs multiples
L'atibut nom est le nom de la propriété à manipuler
L'atttribut valeur est la valeur de la propriété à manipuler
Récupérer une propriété CSS avec la méthode css(nom)
Vous pouvez récupérer la valeur de la propriété CSS d'un élément en passant simplement le nom de la propriété comme paramètre à la méthode css().
Utilisez css(nom) pour renvoyer la valeur de la propriété CSS spécifiée du premier élément séléctionné:
La méthode jQuery css(nom) est utilisée pour récupérer la valeur d'une propriété pour un élément sélectionné , où nom est le nom de la propriété.
Exemple : récupérer la propriété background-color avec css(nom)
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple jQuery récupération de la proprieté bacground-color</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div{width: 200px; height: 100px; background-color: #00ffff;}
</style>
<script>
$(document).ready(function(){
$("div").click(function(){
var fond = $(this).css("background-color");
$("p").html("la propriété css de l'arriére plan est : "+fond);
});
});
</script>
</head>
<body>
<div></div>
<p>Clique sur le carré pour voir la couleur du fond.</p>
</body>
</html>
Définir la propriété CSS et sa valeur
Utilisez css(nom,valeur) pour définir la propriété CSS spécifiée pour tous les éléments selectionnés.
Pour donner une valeur à une propriété pour un élément selectionné, on utilise la fonction css(nom,valeur), où nom est le nom de la propriété et valeur la valeur à donner à cette propriété.
Exemple : Donner une couleur à la propriété css background-color avec css(nom,valeur)
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple jQuery définir de la proprieté bacground-color</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{width: 200px; height: 100px; background-color: #ffff00;}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p#demo").css("background-color","#00ffff");
});
});
</script>
</head>
<body>
<h2>Donner une couleur à la propriété css background-color</h2>
<p>Ce ci est un paragraphe.</p>
<p id="demo">Ce ci est un autre paragraphe.</p>
<button>Cliquer ici</button>
</body>
</html>
Définir des paires de valeur de la propriété CSS
La méthode jQuery css({propriété CSS, valeur}) sert pour définir une ou plusieurs paires de {propriété CSS, valeur} des éléments sélectionnés.
La méthode jQuery css({propriété CSS, valeur}) nous perment surtout de pouvoir définir les valeurs de plusieurs propriété en même temps et dans une seule syntaxe comme le montre l'éxemple ci-dessous
Exemple : Donner une couleur à la propriété css background-color et une taille à la police
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple jQuery affecter une couleur à bacground-color, une taille à la police et une couleur au titre</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
$("h2").css({"color":"#f00","border":"solid 1px #000"});
});
});
</script>
</head>
<body>
<h2>Manipuler plusieurs propriétés css</h2>
<p>Ce ci est un paragraphe.</p>
<p>Ce ci est un autre paragraphe.</p>
<button>Cliquer ici</button>
</body>
</html>
jQuery les méthodes height() et width()
jQuery possède deux méthodes importantes pour la manipulation de la taille d'un éléments.
- la fonction ou méthode height() pour manipuler la hauteur. La méthode jQuery height() perment de changer la hauteur d'un élément.
- la fonction width() qui sert pour manipuler la largeur. La méthode jQuery width() pour changer la largeur de l'élément selectionné.
Exemples de Manipulation de la taille d'un élément
La méthode jQuery height() définit la hauteur de tous les éléments correspondants.
La méthode jQuery width() définit la largeur de tous les éléments correspondants.
Exemple : manipulation de la hauteur et de la largeur des éléments avec les méthodes height() et width()
Exemple : 📝 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple jQuery manipulation de la hauteur et de la largeur</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").height("200px");
});
$("button").click(function(){
$("#div2").width("300px");
});
});
</script>
<style>div{margin-bottom:20px;}</style>
</head>
<body>
<div id="div1" style="background:#00ffff;height:100px;width:120px">Ceci est un
élément pour le quel on va changer la hauteur</div>
<div id="div2"style="background:#ffff00;height:100px;width:120px">ceci est un
autre élément pour lequel on va changer la largeur</div>
<button>Cliquer ici</button>
</body>
</html>
|
Cours precedent: jQuery manipulation html |
Sommaire de : JQuery |
Cours suivant: jQuery AJAX |