Recherche de propriétés CSS non actives

Question

Est-il possible de déterminer des styles dans un fichier CSS via Javascript?

J'essaie de détecter les propriétés CSS qui seront appliquées à un élément dans un certain état, :hover dans ce cas, mais sans les propriétés actuellement actives sur l'élément. J'avais pensé à cloner l'élément, en ajoutant le clone comme un frère avec display: none et en interrogeant les propriétés de cette façon, mais je ne sais pas comment forcer le style :hover à travers Javascript. Des idées?

Answer 1

Le style hover est appliqué par le navigateur, en fonction du mouvement de la souris. Je ne pense pas que vous pouvez le forcer à travers JS. Mais pourquoi voudriez-vous? Il suffit de définir une autre classe css et de l'assigner via la propriété className dans JS.

Answer 2

Pour déterminer les styles throught JS, vous pouvez le faire en utilisant className comme celui-ci par exemple:

item.onmouseover = gohover;

item.onmouseout = nohover;

fonction gohover() {this.className = gClass;}

...

Answer 3

Si je comprends bien votre question, il semble que ce que vous cherchez est un XPath pour CSS (pseudo) classes. En dehors de l'extraction du fichier CSS avec Ajax et de la recherche avec regex, je ne connais aucune méthode pour extraire des informations de style d'un fichier CSS.

Answer 4

Je crois que vous êtes intéressé par le tableau styleSheets qui est une propriété des document (document.styleSheets) Cet index de tableau toutes les feuilles de style référencées par la page en cours et vous permet de parcourir plus dans chaque feuille toutes les règles de style . Le tableau W3C (Firefox, Opera, Safari) pour accéder aux règles css est cssRules tandis que le tableau de Microsoft est rules. L'extrait de code suivant est tiré de www.quirksmode.org:

 
var theRules = new Array(); 
if (document.styleSheets[1].cssRules) 
    theRules = document.styleSheets 1 .cssRules 
else if (document.styleSheets[1].rules) 
    theRules = document.styleSheets 1 .rules 

Maintenant theRules contient les règles pour la deuxième feuille de style pour le document. Voir reference et compatibility tables de quirksmode pour plus d'informations sur l'accès aux règles CSS à partir de JavaScript.