javascript - 如何在没有浏览器默认 css 的情况下获取元素的所有自定义 css

Question

我需要通过 id 或 class 获取应用于元素的所有 css我只需要 css 自定义 css

我有这个函数返回所有的 css，包括浏览器默认内置的 css，我只需要应用的 css，就像 firebug 的工作方式一样。

Firebug 不足以让我使用，因为我需要最终将数据导出到 json 中并以各种方式使用。

这只能是一个 javascript 或 jquery 解决方案。

这是我目前的情况

<div id="elemId" style="border:1px solid red;">

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, true);
console.log(style);

所以一般来说，我需要知道什么 css 已应用于此对象我需要所有外部和内联 css。我不能按名称使用单个 getProperty，因为在大多数情况下我不知道应用了什么，我需要自定义 css 的完整列表。

请只提交您自己测试过的代码，不要从其他论坛粘贴未经测试的代码。

谢谢丹尼尔

Answer 1

因此，当您说“默认浏览器 css”时，我相信您在运行控制台日志样式变量时会看到所有适用的 css 规则。如果您想查看通过样式表、jqyery、内联 css 等应用的所有 css，请使用 cssText:

HTML

<div id="elemId" style="border:1px solid red;">

JS

var elem1 = document.getElementById('elemId');
console.log(elem1.style.cssText);

输出将是

border: 1px solid: red;

jsfiddle