{"id":5696,"date":"2024-08-29T02:56:11","date_gmt":"2024-08-29T02:56:11","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/etapes-pour-modifier-style-en-javascript-guide\/"},"modified":"2024-08-29T02:56:14","modified_gmt":"2024-08-29T02:56:14","slug":"etapes-pour-modifier-style-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/etapes-pour-modifier-style-en-javascript-guide\/","title":{"rendered":"13.1 \u00c9tapes pour Modifier Style en JavaScript : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>\u00c9tapes pour Modifier le Style en JavaScript<\/strong> sont des comp\u00e9tences essentielles pour quiconque d\u00e9sire dynamiser et enrichir ses applications web. Apprenez \u00e0 ajuster le style des \u00e9l\u00e9ments HTML de mani\u00e8re dynamique en utilisant <a href=\"https:\/\/wikiform.fr\/codespace\/etapes-pour-modifier-style-en-javascript-guide\">JavaScript<\/a>, pour cr\u00e9er des interfaces utilisateur attrayantes et interactives. Suivez ce guide d\u00e9taill\u00e9 et concis pour ma\u00eetriser les bases et bien plus encore.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Modification de Style en JavaScript<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658891245?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>JavaScript permet de modifier les styles CSS des \u00e9l\u00e9ments HTML de mani\u00e8re dynamique. En utilisant le DOM (Document Object Model), vous pouvez alterner les propri\u00e9t\u00e9s de style en r\u00e9ponse aux actions de l&rsquo;utilisateur, comme les clics ou les d\u00e9placements de la souris. Voyons comment cela fonctionne avec des exemples concrets de code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments de la Page<\/h3>\n\n\n\n<p>Avant de modifier le style, vous devez d&rsquo;abord acc\u00e9der aux \u00e9l\u00e9ments de la page que vous souhaitez styliser. Utilisez les m\u00e9thodes du DOM telles que <code>getElementById<\/code>, <code>getElementsByClassName<\/code>, ou <code>querySelector<\/code> pour s\u00e9lectionner les \u00e9l\u00e9ments. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ S\u00e9lectionner un \u00e9l\u00e9ment par son ID\nvar myElement = document.getElementById(\"myElementId\");\n\n\/\/ S\u00e9lectionner des \u00e9l\u00e9ments par leur classe\nvar elements = document.getElementsByClassName(\"myClassName\");\n\n\/\/ S\u00e9lectionner un \u00e9l\u00e9ment avec un s\u00e9lecteur CSS\nvar firstElement = document.querySelector(\".myClassName\");\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier les Propri\u00e9t\u00e9s de Style<\/h3>\n\n\n\n<p>Une fois l&rsquo;\u00e9l\u00e9ment s\u00e9lectionn\u00e9, vous pouvez modifier ses propri\u00e9t\u00e9s de style directement en acc\u00e9dant \u00e0 l&rsquo;objet <code>style<\/code>. Par exemple, pour modifier la couleur de fond et la taille de la police :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Changer la couleur de fond\nmyElement.style.backgroundColor = \"blue\";\n\n\/\/ Modifier la taille de la police\nmyElement.style.fontSize = \"20px\";\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Classes CSS<\/h3>\n\n\n\n<p>Pour des modifications de style plus complexes, il est recommand\u00e9 d&rsquo;utiliser des classes CSS. Ajoutez ou retirez des classes \u00e0 un \u00e9l\u00e9ment pour appliquer ou enlever des styles d\u00e9finis dans votre feuille de styles CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Ajouter une classe\nmyElement.classList.add(\"newClass\");\n\n\/\/ Retirer une classe\nmyElement.classList.remove(\"oldClass\");\n\n\/\/ V\u00e9rifier la pr\u00e9sence d'une classe\nif (myElement.classList.contains(\"someClass\")) {\n    console.log(\"L'\u00e9l\u00e9ment a la classe 'someClass'\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier le Style en R\u00e9ponse aux \u00c9v\u00e9nements<\/h3>\n\n\n\n<p>Une des puissances de JavaScript est la capacit\u00e9 de r\u00e9pondre aux \u00e9v\u00e9nements utilisateur. Par exemple, pour modifier le style d&rsquo;un bouton lorsqu&rsquo;il est cliqu\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ S\u00e9lectionner le bouton\nvar button = document.getElementById(\"myButton\");\n\n\/\/ Ajouter un \u00e9couteur d'\u00e9v\u00e9nement pour le clic\nbutton.addEventListener(\"click\", function() {\n    \/\/ Modifier le style du bouton lors du clic\n    button.style.backgroundColor = \"green\";\n    button.style.color = \"white\";\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Animations et Transitions en JavaScript<\/h3>\n\n\n\n<p>Pour des effets plus interactifs, vous pouvez utiliser les animations et les transitions. Voici un exemple d&rsquo;utilisation de CSS pour une transition fluide, combin\u00e9e \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-functions-existantes-en-javascript\">JavaScript<\/a> pour d\u00e9clencher l&rsquo;effet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/* CSS : D\u00e9finir la transition *\/\n.myClass {\n    transition: all 0.3s ease-in-out;\n}\n\n\/* JavaScript : Ajouter la classe pour d\u00e9clencher la transition *\/\nvar element = document.getElementById(\"myElement\");\nelement.classList.add(\"myClass\");\nelement.style.opacity = \"0.5\"; \/\/ Rend progressivement l'\u00e9l\u00e9ment semi-transparent\n<\/code><\/pre>\n\n\n\n<p>Voici un exemple plus complexe incluant une animation avec JavaScript :<\/p>\n<p>Vous trouverez ces animations facilement. Comment activer cette animation quand user interagit :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Animation en modifiant progressivement les positions\nfunction animateElement(element) {\n    let position = 0;\n    let interval = setInterval(frame, 5);\n\n    function frame() {\n        if (position == 350) {\n            clearInterval(interval);\n        } else {\n            position++;\n            element.style.top = position + \"px\";\n            element.style.left = position + \"px\";\n        }\n    }\n}\n\nvar myElement = document.getElementById(\"myAnimate\");\nanimateElement(myElement);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Modifier le style en JavaScript ouvre la porte \u00e0 des interfaces utilisateur dynamiques et r\u00e9actives. En apprenant \u00e0 acc\u00e9der aux \u00e9l\u00e9ments et \u00e0 ajuster leurs propri\u00e9t\u00e9s de style, vous pouvez cr\u00e9er des exp\u00e9riences utilisateur enrichissantes. Explorez les diff\u00e9rentes m\u00e9thodes et n&rsquo;h\u00e9sitez pas \u00e0 combiner JavaScript avec CSS pour maximiser l&rsquo;impact visuel de vos projets. Pour aller encore plus loin dans votre apprentissage, ne manquez pas de consulter nos autres ressources sur le site, comme <a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\">Acc\u00e9der aux \u00e9l\u00e9ments du DOM en JavaScript<\/a> ou <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-javascript\">Modifier les \u00e9l\u00e9ments DOM avec JavaScript<\/a>. Si vous voulez approfondir davantage, consultez nos ressources sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Manipuler_le_DOM\" rel=\"noopener\" target=\"_blank\">la manipulation du DOM avec JavaScript<\/a> et <a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_style.asp\" rel=\"noopener\" target=\"_blank\">W3Schools sur le style DOM<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Apprenez JavaScript avec nous\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html \u00c9tapes pour Modifier le Style en JavaScript sont des comp\u00e9tences essentielles pour quiconque d\u00e9sire dynamiser et enrichir ses applications web. Apprenez \u00e0 ajuster le&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2877,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5696","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5696"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5696\/revisions"}],"predecessor-version":[{"id":5697,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5696\/revisions\/5697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2877"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}