如何通過Javascript訪問元素的focus / hover / visited CSS屬性？

Question

我現在可能會感到疲倦和奇怪，但是我根本無法找到如何檢索在元素的集中狀態，懸停狀態或訪問狀態中定義的CSS屬性的值。 目的是使用Javascript中的值。

重要提示 ：我不需要獲取焦點/懸停/訪問的元素 。 我想使用為以下狀態定義的CSS屬性訪問DOM 中任何元素的某些值 :focus ， :hover和:visited 。

這些偽類在這種情況下似乎無濟於事，所以我是否需要觸發相應的狀態才能訪問這些值？

它應該比這更簡單。。。不是嗎？

PS：用素食Javascript或jQuery回答即可。

Answer 1

是的，您可以通過閱讀樣式表來實現。 您可以使用document.styleSheets;獲得它。 下面是示例和jsfiddle鏈接。

http://jsfiddle.net/wt3qQ/

出於安全原因 ，Opera和Mozilla不允許您從另一個域或協議訪問樣式表的cssRules集合。 嘗試訪問它會引發安全沖突錯誤

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