exemple pour props dynamiques avec width et height

exemples/jquery/styles-largeur-et-hauteur-dun-element/config.json

@@ -0,0 +1,9 @@
+{
+  "title": "Styles : largeur et hauteur d'un élément",
+  "category": "misc",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [ "styles.css" ],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/styles-largeur-et-hauteur-dun-element/example.html

@@ -0,0 +1,8 @@
+<!-- Styles : largeur et hauteur d'un élément -->
+
+<div class="wrapper">
+    <h4>Container</h4>
+    <div class="inner">Inner 1</div>
+    <div class="inner">Inner 2</div>
+</div>
+<ul id="results"></ul>

exemples/jquery/styles-largeur-et-hauteur-dun-element/script.js

@@ -0,0 +1,23 @@
+// Styles : largeur et hauteur d'un élément
+var divsInner = $('.inner');
+divsInner.each(function() {
+   var div = $(this);
+   var functions = [
+       'width', 'innerWidth', 'outerWidth',
+       'height', 'innerHeight', 'outerHeight'
+   ];
+   // On va construire une liste précédée d'un titre
+   var divTitle = div.html();
+   // Tag d'ouverture de la liste
+   var resultHtml = '<li>Div: ' + divTitle + '<ul>';
+   functions.forEach( function( funcName ) {
+       // A la 1ère itération, funcName vaut width, puis innerWidth à la 2nde...
+       // On va se servir de ce funcName pour savoir quelle fonction appeler !
+       var result = div[funcName]();
+       resultHtml += '<li>.' + funcName + '() renvoie: '+ result + '</li>';
+   });
+   resultHtml += '</ul></li>'; // Ne pas oublier les tags de fermeture
+   
+   // On ajoute le tout à la div de résultats.
+   $('#results').append(resultHtml);
+});

exemples/jquery/styles-largeur-et-hauteur-dun-element/styles.css

@@ -0,0 +1,18 @@
+/* styles.css */
+div {
+    padding: 10px;
+}
+.wrapper {
+    background: #999;
+}
+.inner {
+    margin-bottom: 20px;
+}
+.wrapper div:nth-child(2) {
+    background: #bef;
+    margin-left: 40px;
+}
+.wrapper div:nth-child(3) {
+    background: #efb;
+    border: 10px solid #bbb;
+}