javascript - propiedad - pseudo clases css

¿Cómo acceder al foco/hover/propiedades CSS visitadas de un elemento a través de Javascript?

Question

Puede que ahora esté cansado y piense de manera extraña, pero simplemente no puedo encontrar cómo recuperar los valores de las propiedades de CSS definidas en los estados enfocados, suspendidos o visitados de un elemento. El objetivo es usar los valores en Javascript.

Importante : no necesito obtener los elementos enfocados / suspendidos / visitados . Deseo acceder a ciertos valores de cualquier elemento en el DOM con propiedades CSS definidas para los siguientes estados :focus :hover y :visited .

Estas pseudo-clases no parecen ayudar en este caso, ¿entonces necesito activar el estado respectivo para acceder a los valores?

Debería ser más simple que esto ... ¿O no?

PD: respuestas en Javascript vegetariano o jQuery servirá.

Answer 1

Sí, puedes lograr esto leyendo hojas de estilo. Puedes obtenerlo usando document.styleSheets; A continuación se muestra el ejemplo y el enlace jsfiddle.

http://jsfiddle.net/wt3qQ/

Por razones de seguridad , Opera y Mozilla no le permitirán acceder a la colección cssRules de una hoja de estilo de otro dominio o protocolo. Intentar acceder arrojará un error de violación de seguridad

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);