Comment accéder aux propriétés CSS focus/hover/visited d'un élément via Javascript?

Question

Je suis peut-être fatigué et je pense curieusement en ce moment, mais je ne trouve tout simplement pas comment récupérer les valeurs des propriétés CSS définies dans les états focalisés, planés ou visités d'un élément. Le but est d'utiliser les valeurs en Javascript.

Important: Je ne pas besoin d'obtenir les focalisées/plané/visités éléments. Je veux accéder à certaines valeurs de n'importe quel élément dans le DOM avec Propriétés CSS définies pour les états suivants: :focus, :hover et :visited.

Ces pseudo-classes ne semblent pas aider dans ce cas, ai-je donc besoin de déclencher l'état respectif pour accéder aux valeurs?

Cela devrait être plus simple que cela ... Ou n'est-ce pas?

P.S .: Réponses en Javascript végétarien ou jQuery fera l'affaire.

Answer 1

Oui, vous pouvez y parvenir en lisant des feuilles de style. Vous pouvez l'obtenir en utilisant document.styleSheets; Voici l'exemple et le lien jsfiddle.

http://jsfiddle.net/wt3qQ/

Pour des raisons de sécurité , Opera et Mozilla vous ne permettra pas d'accéder à la collection cssRules d'une feuille de style d'un autre domaine ou protocole. La tentative d'accès il lancer une violation de la sécurité erreur

function getStyleBySelector(selector) 
    { 
     var sheetList = document.styleSheets; 
     var ruleList; 
     var i, j; 

     /* look through stylesheets in reverse order that 
      they appear in the document */ 
     for (i=sheetList.length-1; i >= 0; i--) 
     { 
      ruleList = sheetList[i].cssRules; 
      for (j=0; j<ruleList.length; j++) 
      { 
       if (ruleList[j].type == CSSRule.STYLE_RULE && 
        ruleList[j].selectorText == selector) 
       { 
        return ruleList[j].style; 
       } 
      } 
     } 
     return null; 
    } 

console.log(getStyleBySelector('a:hover').color); 
console.log(getStyleBySelector('#link:hover').color);