如何通过Javascript访问元素的focus/hover/visitedCSS属性？

Question

我现在可能很累，而且思考很奇怪，但我就是找不到如何检索在元素的聚焦、悬停或访问状态中定义的 CSS 属性的值。目标是使用 Javascript.

中的值

重要：我不需要获取focused/hovered/visited个元素。我想访问 DOM 中任何元素的某些 值，其中 CSS 属性为以下状态 定义：:focus、:hover 和 :visited.

这些伪类在这种情况下似乎没有帮助，所以我需要触发相应的状态才能访问这些值吗？

应该比这更简单...或者不是？

P.S.: 以素食 Javascript 或 jQuery 的答案即可。

Answer 1

是的，您可以通过阅读样式表来实现这一点。您可以使用 document.styleSheets 获取它；下面是示例和 jsfiddle link.

For security reasons, Opera and Mozilla will not allow you to access the cssRules collection of a stylesheet from another domain or protocol. Attempting to access it will throw a security violation error

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

如何通过Javascript访问元素的focus/hover/visitedCSS属性？

How to access the focus/hover/visited CSS properties of an element through Javascript?

javascript

css

jquery

css-selectors

pseudo-class