11548 sujets

JavaScript, DOM et API Web HTML5

Lecture pseudo-éléments en JS

Bonjour,

Je tombe sur un problème bête... Mais je sèche Smiley decu

Je souhaite modifier avec JS un pseudo-élément déclaré en CSS comme ceci :

h1:first-letter {font-size: 200%;}


Ben, oui mais comment on fait ?

Avec, par exemple, getElementsByTagName("h1").style on récupère bien les styles déclarés pour la balise h1 ; mais que dalle pour le pseudo-élément first-letter Smiley fache

Merci de votre aide Smiley cligne
Merci Chmel, mais j'avais déjà appris par coeur ce qu'ils disent sur ce site là Smiley cligne

Le problème, c'est que j'ai facilement trouvé comment récupérer en JS un objet "style" du DOM, mais que, apparemment, les styles des pseudos-éléments comme first-letter, hover, etc. ne se trouvent pas dans cet objet "style".

Où se cachent-ils donc ??? Smiley mur
Bonjour.

Il existe un tableau document.styleSheets ou quelque chose du genre, qui contient les différentes feuilles CSS chargées.
Chaque élément du tableau contient un tableau nommé rules (pour IE, sous ff c'est un autre nom mais ça existe).
Enfin, chaque élément du tableau rules contient une définition CSS (littéralement, une "gèel")

Chaque définition CSS possède les propriétés selector et style qui permettent de modifier la CSS.

Bonne chance !
Ok, Quentin, on peut récupérer les styles en lisant la feuille de style : ça donne un code comme ça pour modifier le style du pseudo-élément first-letter (par exemple) :

<style type="text/css">
h1:first-letter {font-size: 200%;}
h1 {font-size: 12pt;}
</style>

<script type="text/javascript">
function TestPseudo() {
	var bNavNS = navigator.appName.substring(0, 3) == "Net";
	if (bNavNS) document.styleSheets[0].cssRules[0].style.cssFloat = "left";
	else document.styleSheets[0].rules[0].style.styleFloat = "left";
}
</script>

Comme d'habitude, la syntaxe est différente entre FF et IE... Smiley bawling

Mais j'aurais aimé faire autrement (bien que je commence à me demander s'il y a une autre méthode).

En effet, cette technique n'est pas compatible avec Opera, qui n'accepte pas la lecture de la feuille de style, ni avec Safari, qui accepte de lire mais pas de modifier la feuille de style...

Agaçant, non ? Smiley bataille
Sujet clos
Aller à