11

Firebug 很棒，它允许我查看应用于您选择的 DOM 中的元素的所有 CSS，但您可以：

a）按照CSS中的定义，按应用顺序逐行查看（非常有用，但不是我想要的）或

b) 查看它“已计算”，即所有 CSS 规则和该元素具有的值。

我想要的是一个工具或扩展，它允许我选择一个元素，并以可复制粘贴的形式向我展示为该元素定义的所有 CSS。如果元素具有 font-style:normal 只是因为它是该元素的默认值，我不想在那里（Firebug 在计算视图中显示所有这些）。

基本上我希望能够：

  1. 我在我自己的网站上看到了我想在网站上复制的元素（如按钮）。
  2. 使用此工具可以将一堆 CSS 应用于该元素。
  3. 粘贴在我自己的 CSS 上。
  4. 在我的网站中获得相同的外观元素。耶！

有任何想法吗？

4

7 回答 7

6

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

于 2012-09-17T12:29:26.857 回答
4

我知道这个问题已经有将近 4 年的历史了，但是如果今天有人在寻找它，那么有一个 Chrome 扩展程序可以处理它。https://github.com/kdzwinel/SnappySnippet

它在 Chrome Inspector 中添加了一个新选项卡，您只需单击一个按钮即可获取所选元素及其子元素的所有 html 和 css。然后你可以将它导出到codepen、jsfiddle和jsbin，或者复制粘贴。

于 2016-03-24T14:09:01.553 回答
2

Google Chrome 内置了诸如 Firebug 之类的工具，称为“Chrome 开发者工具”。根据我的经验，它非常强大，大约一年前我从 Firefox/Firebug 切换到 Chrome。有几种不同的方法可以启动开发人员工具。您可以在https://developers.google.com/chrome-developer-tools/docs/overview找到详细文档

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

在此处输入图像描述

如果特定样式的左侧有一个可扩展的三角形，您可以找出样式表以及样式的来源。

在此处输入图像描述

于 2012-09-17T14:17:06.967 回答
2

您不需要任何扩展，Firefox 中的内置检查器可以做到这一点。右键单击元素，选择“检查元素”。单击底部工具栏中的样式按钮 - 那里是一个侧边栏，其中包含应用于该元素的所有样式。

于 2012-09-17T14:29:37.130 回答
0

我试过 SnappySnippet 并发现CSSSteal要好得多。它将只抓取 CSS，并以与文档相同的格式执行此操作，这与 SnappySnippet 不同。

于 2018-02-28T21:59:30.343 回答
0

window Object>>上有一个 API window.getComputedStyle(DOMElement)。这是如果我们需要以computed styles编程方式工作。

window.getComputedStyle 的 MDN 文档

祝你好运...

于 2018-03-15T12:47:21.947 回答
0

我试图通过window.getComputedStyle它来计算它，并且需要对其进行优化以消除不必要的样式属性。https://github.com/aleen42/DOM-mirror

于 2020-01-03T03:56:33.793 回答