La méthode css() en jQuery

La méthode css() en jQuery

  1. Objectifs

    • Etre capable d’utiliser la méthode css() en jQuery
  2. Présentation

    • La méthode css() permet de manipuler les propriétés CSS d’élément du code HTML
      • css("Propriété") retourne la valeur d’une propriété.
      • css("Propriété", "valeur",…) affecte la valeur à la propriété.
      $(#leBouton).css("width");
      $("p").css("background-color","yellow");
      $("p").css({"background-color":"yellow","display":"box"}); 
      
    • JQuery prend en charge presque tous les sélecteurs inclus dans la feuille de style en cascade (CSS).
    • La méthode css() dans JQuery est utilisée pour changer la propriété de style de l’élément sélectionné. Le css () dans JQuery peut être utilisé de différentes manières.



  3. La méthode css(nompropriété)

    • La méthode css(propriété_css) peut être utilisée pour vérifier la valeur actuelle de la propriété de l’élément sélectionné:
    • Avec Jquery la méthode css(propriété_css) permet d’accéder à une propriété de style css(propriété propriété_css passé en paramètre) du premier élément trouvé

    • Syntaxe:
      • $(sélecteur).css(propriete_css)
      • Valeur de retour: il retournera la valeur de la propriété pour l’élément sélectionné.
      • Le nom propriete_css: est une chaîne de caractère qui prend le nom de la propriété de style css à accéder.Cette méthode renvoie une chaîne de caractère de type string
    • Exemple :
      • Récupérer la couleur d’arrière-plan d’un div.
        • L’exemple suivant montre comment récupérer la couleur d’un div après clic
        • <!doctype html>
          <html lang="fr">
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Filtre de base First</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          
          <style type="text/css">
          div { width:60px; height:60px; margin:5px; float:left; }
          </style>
          <script >
            $(function (){
                $("div").click(function () {
                var couleur = $(this).css("background-color");
               $("#resultat").html("Ce div a une couleur: <b style='color:" + couleur + ";'>" + couleur + "</b>.");
          });
          });
          </script>
          </head>
          <body>
                <p id="resultat"> </p>
                <div style="background-color:#11ff11;"></div>
                <div style="background-color:rgb(15,99,30);"></div>
                <div style="background-color:blue;"></div>
                <div style="background-color:#f11;"></div>
                <div style="background-color:rgb(125, 163, 132);"></div>
                <div style="background-color:green;"></div>
                <div style="background-color:goldenrod;"></div>
           
            </body></html>
        • ِCe qui donne
        • La méthode css en jQuery

  4. La méthode css(nompropriété, valeur)

    1. Description:
      • Définir une ou plusieurs des propriétés CSS pour l’ensemble des éléments sélectionnés.
      • Avec jQuery, la méthode css({ens_proprietes}) permet de modifier les propriétés de style CSS ens_proprietes d’un élément donné en utilisant la notation CSS clé/ valeur pour les propriétés de style à modifier.
      • Il faut remarquer la présence des accolades habituelles pour les déclarations de style CSS.
      • Différentes écritures sont admises pour spécifier une propriété CSS:
        • Utilisation des guillemets comme par exemple avec la propriété CSS background-color qui s’écrira {"background-color": "red"}.
        • Utilisation de la notation JavaScript comme par exemple avec la propriété CSS background-color qui s’écrira {backgroundColor : "red"}.
    2. Syntaxe:
      • $(sélecteur).css(nompropriété, valeur)
    3. Utilisation de plusieurs propriétés:
      • Avec jQuery, la méthode css({ens_proprietes}) peut être utilisée avec plusieurs propriétés et valeurs, distingué avec des virgules.
    4. Utilisation des valeurs relatives:
      • Avec jQuery, la méthode css({ens_proprietes}) peut être utilisée avec des valeurs relatives pour modifier la valeur d’une propriété de style CSS.
      • Celle-ci peut se noter avec += ou -= par rapport à la valeur courante.
      • On utilisera les écritures suivantes pour la propriété CSS left ,par exemple, qui spécifie l’espace côté gauche à l’intérieur d’un conteneur:
        • Utilisation des guillemets comme par exemple avec "left": "+=10px" pour augmenter l’espace côté gauche de 10 pixels.
        • Utilisation de la notation JavaScript comme par exemple avec {left :"+=10px"} pour augmenter l’espace côté gauche de 10 pixels.
    5. Exemples :
      • Pour modifier la couleur d’un élément div au jaune sur l’événement mouseover.
        • <script>
           $("div").mouseover(function () {
          $(this).css("color","yellow");
           });
          </script>
      • Pour augmenter la largeur et la hauteur d’un élément div dont l’id est "idDiv" sur l’événement clic.
        • $("#idDiv").click(function () {
           $( this ).css({width :'+=200' , height : "+=200"});
           });

Abonnez vous à notre chaîne YouTube gratuitement