有没有浏览器扩展程序可以获取应用于DOM元素的所有CSS？

Question

Firebug很好用，可以让我查看选择的DOM元素应用的所有CSS，但是你只能：

a）按CSS定义的顺序逐行查看（非常有用但不是我要找的）或者

b）查看“计算出来”的，即所有CSS规则和该元素具有的值。

我想要的是一种工具或扩展，它可以让我选择一个元素，并以可复制的形式显示该元素的所有已定义的CSS。如果该元素的字体样式为normal，那么我不想在这里看到它（Firebug在计算视图中显示所有这些内容）。

基本上，我想要能够：

1. 看到我想要在自己的网站中精确复制的元素（如按钮）。
2. 使用这个工具获取应用于该元素的大量CSS。
3. 将其粘贴到我的CSS中。
4. 在我的网站中获得相同外观的元素。耶！

有什么想法吗？

- manuelflara

Answer 1

切换到Chrome默认元素检查器（按F12），它具备你需要的所有功能。你可以在“计算样式”面板中找到所有内容，包括一个有用的“显示继承”复选框。

- Caelea

---

这似乎几乎是我想要的。唯一的问题是它会显示页面中所有CSS规则及其值，而不仅仅是元素从所有CSS定义中应用的内容。我的意思是，它可能具有clip:auto、clip-path:none等，即使对于该元素来说这些内容还未被覆盖为其默认值，因此该工具提供的元素计算CSS具有大量不必要的CSS代码。 - manuelflara

Answer 2

我知道这个问题已经有四年的历史了，但如果今天有人在寻找解决方法，可以使用一个 Chrome 扩展来处理它。 https://github.com/kdzwinel/SnappySnippet

该扩展程序将在 Chrome Inspctor 中添加一个新选项卡，您只需要点击一个按钮即可获取所选元素及其子元素的所有 HTML 和 CSS。然后，您可以将其导出到 codepen、jsfiddle 和 jsbin，或者复制并粘贴。

- Ricardo Gonçalves

Answer 3

Google Chrome内置了名为“Chrome Developer Tools”的类似Firebug的工具，从我的经验来看，它非常强大，我在一年前从Firefox / Firebug切换到Chrome。有几种不同的方法可以打开开发人员工具。您可以在https://developers.google.com/chrome-developer-tools/docs/overview找到详细的文档。

当您将Chrome开发人员工具打开到元素选项卡并选择一个元素时，您可以展开右侧的计算样式区域并查看组成该元素的所有样式。

如果特定样式左侧有可展开的三角形，则可以找出样式表和样式的来源。

- Mike Grace

Answer 4

您不需要任何扩展程序，Firefox内置的检查器可以完成此操作。右键单击元素，选择“检查元素”。点击底部工具栏中的“样式”按钮 - 然后就有了一个侧边栏，其中包含应用于该元素的所有样式。

- Wladimir Palant

Answer 5

我尝试通过 window.getComputedStyle 进行计算，需要进行优化以去除不必要的样式属性。https://github.com/aleen42/DOM-mirror

- PuiMan Cheui

Answer 6

在window对象上有一个API >> window.getComputedStyle(DOM元素)。如果我们需要以编程方式处理计算样式，就可以使用它。

MDN文档：window.getComputedStyle

祝好运...

- Aakash

Answer 7

我尝试过 SnappySnippet，但发现 CSSSteal 更好。它只会提取 CSS，并且会按照文档的格式进行提取，而不像 SnappySnippet 那样。

- cjbarth

Answer 8

你可以尝试这个扩展https://getcssscan.com/?ref=beautifulcheckboxes_header，但它不是免费的。我在寻找解决方案时发现了它。

- Ilyas karim