如何用JavaScript实现浏览器检查元素效果，获取含@规则的全量计算样式

我需要为指定DOM元素生成一个JavaScript对象，记录所有对其生效的计算样式，包括元素本身直接设置的和从父级继承的样式，最终效果要和Chrome、Firefox开发者工具元素面板下的检查元素展示的样式列表一致，同时定位到这些样式对应的设置类名或ID，和Chrome检查元素效果完全对齐。

待解决问题 #

目前我已经可以获取目标元素的类名和ID，读取对应的样式规则，但还需要处理通过层级继承自父元素的生效样式。最初的思路是向上遍历DOM树收集所有父级样式，再过滤掉不会被子元素继承的规则，不过实现逻辑比较复杂，另外还有两个需要解决的问题：

• 获取当前对元素生效的@media规则，且要支持响应式更新：当屏幕尺寸变化触发CSS媒体查询切换时，需要重新计算获取对应的生效规则
• 需要一份不会被子元素继承的CSS规则列表，希望获取官方相关参考

现有实现代码 #

我尝试了以下方案获取计算样式，目前已经完成基础功能，还需要完善剩余逻辑：

JavaScript 代码 #

var cssClassObj = [];
cssClassObj['classA'] = [];
cssClassObj['classA']['background'] = '#000';
cssClassObj['classB'] = [];
cssClassObj['classB']['color'] = '#fff';
cssClassObj['classC'] = [];
cssClassObj['classC']['color'] = 'red';

var cssIDObj = [];
cssIDObj['starthere'] = [];
cssIDObj['starthere']['text-decoration'] = 'underline';

var i = 0;
var StyleOBJ = [];
var el = document.getElementById('starthere');

var overwrittenRules = [];
var thisParentTree = [];
var ThisStyleOBJ = getObj(StyleOBJ, el, overwrittenRules, thisParentTree);
console.log(ThisStyleOBJ);

function getObj(styleObj, el, overwrittenRules, parentTree, start = true) {
  if (el != document) {
    var classes = el.classList;
    for (var className in classes) {
      if (classes.hasOwnProperty(className)) {
        var cssStyles = cssClassObj[classes[className]] || null;
        for (var style in cssStyles) {
          if (cssStyles.hasOwnProperty(style)) {
            if (typeof overwrittenRules[style] !== "undefined") {
              cssStyles[style] += " :Omitted!!";
            } else {
              overwrittenRules[style] = true
            }
          }
        }
        StyleOBJ['class-' + classes[className]] = cssClassObj[classes[className]] || null;
        if (!start) {
          parentTree[++i] = el;
          StyleOBJ['class-' + classes[className]]['Parentree'] = parentTree.slice();
        }
      }
    }
    if (el.id) {
      StyleOBJ['id-' + el.id] = cssIDObj[el.id] || null;
    }
    var parent = el.parentNode;
    styleObj = getObj(styleObj, parent, overwrittenRules, parentTree, false);
  }
  return styleObj;
}

配套CSS代码 #

.classA {
  background: #000;
}
.classB {
  color: #fff;
}
.classC {
  color: red;
}

配套HTML代码 #

<body>
  <div class="classA">
    <div class="classB">
      <p id="starthere" class="classC">
        打开控制台即可查看生成的对象，其中包含所有生效样式，被覆盖的规则会标记为Omitted。如果是父级样式，还会附带对应的父节点层级树。
        <br/><br/>
        待完善功能：
        <br/>
        识别!important规则优先级，更新被覆盖的子级样式标记
        <br/>
        识别当前对元素生效的媒体查询规则
        <br/>
        实现样式表自动转对象逻辑，无需手动硬编码
      </p>
    </div>
  </div>
</body>

注意：由于平台限制，代码片段不会直接展示生成的对象，点击运行后需要打开控制台才能看到输出结果。

内容的提问来源于stack exchange，提问作者David Coleman