oujood.com

jQuery Manipulation CSS

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.

chercher |

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)

Sélectionner 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)

Sélectionner 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

Sélectionner 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()

Sélectionner 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   
Par gerywa 25 juillet 2014

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web