MySQL selectionner des données
jQuery possède une seule méthode importante pour la manipulation de CSS : css(). La méthode jQuery css() a trois syntaxes différentes, pour exécuter des tâches différentes
jQuery possède une seule méthode importante pour la manipulation de CSS c'est: css().
La méthode jQuery css() est utilisée pour obtenir une propriété CSS ou définir une ou plusieurs propriétés CSS pour les éléments sélectionnés.
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.
L'atibut nom est le nom de la propriété à manipuler
L'atttribut valeur est la valeur de la propriété à manipuler
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 : 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>
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 : 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>
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 : 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 possède deux méthodes importantes pour la manipulation de la taille d'un éléments.
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 : 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 |