Warning: Use of undefined constant uniqid - assumed 'uniqid' (this will throw an Error in a future version of PHP) in /homepages/43/d521926771/htdocs/epcwbsite/wp-content/plugins/epica-official-sc/core/shortcodes.php on line 3
3 METHODES POUR FAIRE INTERAGIR CSS ET JAVASCRIPT | epica design
Se connecter Recherche

CSS et JavaScript sont 2 langages qui ont toujours fait un travail très différents ! Si l’un est utilisé pour le design et l’autre pour dynamiser le contenu de notre site, ils n’en restent pas moins deux technologies Front-end ayant utilisées en étroite collaboration.

Si chacun dispose de sa propre syntaxe et d’extension de fichier spécifique, cela ne signifie pas qu’on ne peut pas les faire communiquer plus étroitement que ce que les frameworks habituels nous permettent.

Voici donc 3 méthodes à connaître pour leur permettre de travailler ensemble !

Cibler un pseudo-élément CSS avec JavaScript

Nous savons que nous pouvons obtenir les valeurs de base de style CSS d’un élément en utilisant la propriété style, mais qu’en est-il des propriétés de pseudo-élément? Et bien nous pouvons y accéder aussi !

// Recuperer la valeur couleur de .element:before
var color = window.getComputedStyle(
        document.querySelector('.element'), ':before'
).getPropertyValue('color');

// recuperer les valeurs content de .element:before
var content = window.getComputedStyle(
        document.querySelector('.element'), ':before'
).getPropertyValue('content');

Très utile pour créer des styles dynamiques unique à votre site (du moins pour tous ceux qui liront cet article)

L’API classList

Nous utilisons tous les méthodes addClass, removeClass et toogleClass dans la création de nos scripts JS. Dans le fonctionnement habituelle des bibliothèques, on récupère l’élément dans son format de chaine, on ajoute/retire les classes puis remettons à jour cette chaîne. Mais aujourd’hui il existe une nouvelle API pour ajouter, supprimer et basculer les class, une API pour les contrôler tous: classList !

DivCible.classList.add('myCssClass'); // Adds a class
DivCible.classList.remove('myCssClass'); // Removes a class
DivCible.classList.toggle('myCssClass'); // Toggles a class

Cette dernière à été intégrée depuis pas mal de temps par la plupart des navigateurs sauf … (roulement de tambour) Internet Explorer qui ne le prend en charge qu’à compter de sa version 10.

Ajouter et supprimer des règles directement dans des feuilles de styles

Nous sommes tous habitués à effectuer des modifications de style en utilisant element.style.propertyName, mais saviez vous que vous pouvez lire et écrire des règles dans vos feuilles de styles CSS ? Pour ce faire, rien de compliqué, il vous suffit d’utiliser une API assez simple :

function addCSSRule(sheet, selector, rules, index) {
       if(sheet.insertRule) {
              sheet.insertRule(selector + "{" + rules + "}", index);
        }
       else {               sheet.addRule(selector, rules, index);
        }
}
 // Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

Le cas d’utilisation le plus courant est la création d’une nouvelle feuille de style, mais vous pouvez également utiliser cette API pour en modifier une existante.


Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/43/d521926771/htdocs/epcwbsite/wp-includes/class-wp-comment-query.php on line 399

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*