jQuery Manipulation CSS

jQuery possède une seule méthode importante pour la manipulation de CSS c'est: css()

jQuery méthode css()

jQuery cours tutorial

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 css(nom)

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(name)

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo récupération de la proprieté bacground-color</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
  </script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("div").click(function(){
      $("p").html($(this).css("background-color"));
    });
  });
  </script>
  </head>
  <body>
  <div style="width:100px;height:100px;background:#ffff00"></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="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo définir la propriété background-color</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").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>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="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo affecter une couleur à bacground-color</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").css({"background-color":"yellow","font-size":"200%"});
    });
  });
  </script>
  </head>
  <body>
  <h2>Donner une couleur à la propriété css background-color et une taille à la
  police </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="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo manipulation de la hauteur et de la largeur</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("#div1").height("200px");
    });
    $("button").click(function(){
      $("#div2").width("300px");
    });
  });
  </script>
  </head>
  <body>
  <div id="div1" style="background:#00ffff;height:100px;width:100px">Ceci est un
  élément pour le quel on va changer la hauteur</div>
  <div id="div2"style="background:#ffff00;height:100px;width:100px">ceci est un
  autre élément pour le quel on va changer la largeur</div>
  <button>Cliquer ici</button>
  </body>
  </html>

 



Cours precedent:
cours precedent  jQuery manipulation html
    Sommaire de :
JQuery
 Cours suivant:
jQuery AJAX    cours suivant
Par gerywa 25 juillet 2014