exemple manipulation styles avec .css()

exemples/jquery/repo-config.json

@@ -11,6 +11,10 @@
       "title": "Manipulation du DOM"
     },
     {
+      "slug": "proprietes-style",
+      "title": "Propriétés de style"
+    },
+    {
       "slug": "evenements",
       "title": "Évènements"
     },

exemples/jquery/styles-lecturemodification-par-css/config.json

@@ -0,0 +1,10 @@
+{
+  "slug": "styles-lecturemodification-par-css",
+  "title": "Styles : lecture/modification par css",
+  "category": "proprietes-style",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/styles-lecturemodification-par-css/example.html

@@ -0,0 +1,14 @@
+<!-- Styles : lecture/modification par css -->
+<div><em>Note :</em> les valeurs des couleurs vont être indiquées sous la forme
+<code>rgb(rouge, vert, bleu)</code>. Cela permet ici de voir les codes couleurs
+associés à chaque couleur CSS pré-définie (blue, green, etc.)</div>
+<h3>Comme <em>getter</em> : renvoie la valeur de la propriété CSS</h3>
+<p style="color: blue">Un paragraphe en bleu</p>
+<div>Valeur de la propriété <code>color</code>: <span></span></div>
+
+<h3>Comme <em>setter</em> : modifie la valeur de la propriété CSS</h3>
+<p>Un paragraphe sans style de base</p>
+<div>Valeur de la propriété <code>color</code> après modification: <span></span></div>
+
+<h3>Comme <em>setter</em> : modifie les valeurs de plusieurs propriétés CSS</h3>
+<p>Un paragraphe sans style de base</p>

exemples/jquery/styles-lecturemodification-par-css/script.js

@@ -0,0 +1,26 @@
+// Styles : lecture/modification par css
+
+var colorFirst = $('p:first').css('color');
+$('p:first + div > span').html(colorFirst);
+
+$('p:eq(1)').css('color', 'green');
+var colorSecond = $('p:eq(1)').css('color');
+$('p:eq(1) + div > span').html(colorSecond);
+
+var properties = {
+    color: 'red',
+    backgroundColor: '#bbb',
+    fontSize: '130%',
+    padding: '10px',
+    'font-weight': 'bold'
+};
+var thirdParagraph = $('p:eq(2)');
+thirdParagraph.css(properties);
+for( var key in properties ) {
+    var value = thirdParagraph.css(key);
+    console.log( key, value );
+    var texte = '<div>Valeur de la propriété <code>' +
+        key + '</code> après modification: <span></span></div>';
+    var div = $( texte ).insertAfter( thirdParagraph );
+    div.find('span').html( value );
+}