Javascript Girl
  1. Javascript Girl
  3. Manipuler CSS Psuedo :: Après les propriétés
Intereting Posts
Comment changer le bouton du clavier "Retourner" à "Rechercher" pour l'entrée dans un UIWebView? Comment obtenir le nom de la classe via JavaScript Supprimer la limite des couleurs de la légende Attendez la fin d'une fonction Javascript asynchrone pour récupérer un résultat (différé?) Les liens déroulants Twitter Bootstrap (v2.2.1) ne fonctionnent pas sur un mobile Est-ce que je peux changer conditionnellement le caractère entré dans une entrée sur la touche? Assurez-vous qu'au moins une case à cocher est cochée Passer ce.method dans setTimeout ne fonctionne pas? Où se trouve le fichier .JS dans ce code? Et pourquoi l'appellent-ils de cette façon? Quelle est la construction x = x || Tu veux dire? La fermeture de Javascript? Comment externaliser un modèle js vers un fichier différent lors de l'utilisation de Handlebars.js Gestion des erreurs et récupération avec jQuery différé Comment utiliser JavaScript EventTarget? Méthode de la meilleure méthode pour $ http loading popup

Manipuler CSS Psuedo :: Après les propriétés

Je travaille sur un épurateur de ligne de temps où j'ai un marqueur qui est traîné à gauche et à droite avec un élément :: after qui y est lu. Je dois être en mesure de définir la hauteur de la ligne en fonction du nombre de couches disponibles, mais je ne vois pas comment accéder à l'élément DOM. J'ai fait des recherches et, bien qu'il y ait eu des solutions en ajoutant des éléments au corps, cela deviendrait rapidement lourd et encombré par rapport à la simple modification du css directement.

J'ai une démonstration ici: http://codepen.io/ajhalls/pen/QdgXBQ

Pour simplifier, je l'ai simplifié pour essayer d'accéder à la hauteur en faisant glisser le curseur vers la gauche et vers la droite. Alors que cela utilise jQuery, je suis certainement bien avec toutes les autres solutions qui utilisent JS aussi. 

$(".scrubber-icon").draggable({ axis: 'x', containment: "parent", drag: function( event, ui ) { var scrubberValue = ($(".scrubber-icon").position().left-15); $(".scrubber-icon").css( "::after", "height", scrubberValue); $("#text").html("position:" + scrubberValue); } });

Les pseudo éléments ne sont pas accessibles par javascript directement, ils sont définis dans les feuilles de style. La façon dont vous pouvez modifier vos pseudo-éléments est en écrivant votre propre feuille de style à la volée. Maintenant, en toute équité, je me suis rapidement moqué de cela pour voir si cela fonctionnerait, mais je ne sais pas comment taxer sur le navigateur c'est quand la feuille de style est réévaluée souvent.

Le script ci-dessous ajoute une fonction appelée jsPseudo . Vous passez un node , un pseudo type et soit une chaîne (qui renverra la valeur à l'intérieur de cet attribut – si vous le définissez avec cette fonction avant) ou un object , où la clé est l'attribut et la valeur est, bien, le valeur. Il ajoute une feuille de style à la page qu'il va réécrire lors de la mise à jour. 

 const jsPseudo = function(){ var pseudos = {}, count = 1, style = document.createElement('style'); document.body.appendChild( style ); return function( node, type, keyValues ){ var id = node.getAttribute('data-has-pseudo'); if( !id ){ id = count++; node.setAttribute('data-has-pseudo', count); } id = `[data-has-pseudo="${count}"]:${type}`; pseudos[id] = pseudos[id] || {content:''}; if( typeof keyValues === 'object' ){ for( let key in keyValues ){ pseudos[id][key] = keyValues[key]; } style.textContent = ''; for( let key in pseudos ){ style.textContent += `${key}{` for( attr in pseudos[key] ){ style.textContent += `${attr}:${pseudos[key][attr]};` } style.textContent += `};`; } return node; } else if( typeof keyValues === 'string' ){ return pseudos[id][keyValues]; } } }(); jsPseudo( document.body, 'after', { 'content':'"Hello world!"' }); console.log( jsPseudo( document.body, 'after', 'content' ) );