javascript - 查找所选元素的所有 CSS 类规则(来自多个样式表)及其事件属性的列表

Question

我需要为选定元素获取所有匹配的 CSS 选择器，以及为该元素激活的每个类的属性。

到目前为止，我已经研究了 getMatchedCSSRules 和 http://www.brothercake.com/site/resources/scripts/cssutilities/

我不想使用 cssutilities 库，因为如果通过 Javascript 在样式表内的页面上发生任何更改，它不会更新(它创建自己的规则数组，需要在每次更改后一次又一次地更新在任何样式标签中使用 Javascript 时发生)

基本上，我需要的是 getMatchedCSSRules 在 chrome 中返回的内容，但对于每个规则中的每个属性，我需要一个额外的属性，如“active”，它告诉当前属性是事件的还是被覆盖其他一些类。

它需要在 Webkit 和 Firefox 中工作(我正在使用 Gecko 的 polyfill for getMatchedCSSRules)

返回应该像 -CSSRulesAffectingElement = {

     rule : {
           text:"<css rule's text>,
           properties : {
              property1:{value:<value>,status:<active,cancelled>}
           }
        }
     }

示例 -//当事件字体大小来自其他规则时

colorclass:
{
    csstext:'background-color:red;font-size:12px',
    properties: 
    {
        Background-color:
        {
            value:'red',
            status:'active'
        },
        Font-size:
        {
            value:'12px',
            status:'cancelled'
        }
    }
}

Answer 1

我认为除非解析实际的 CSS 文件，否则这是不可能的。我对此很感兴趣，发现 less.js 正在做的事情。

你可以在 git hub 上查看他们的代码，也许它有帮助:

https://github.com/less/less.js