如何获取元素的所有 CSS 样式？答案

【问题标题】：How can I grab all css styles of an element?如何获取元素的所有 CSS 样式？
【发布时间】：2011-07-14 20:59:40
【问题描述】：

如果我喜欢网站的某个元素，并且想在我的网站中实现它，那么最简单的方法是什么？有时有很多 CSS 文件，很难全部跟踪。

【问题讨论】：

确保您确实有权使用它。
同意。查看源代码以探索事物是如何实现的并学习新技术，但绝不能只是批量提升标记。

标签： html css

【解决方案1】：

在 chrome/Chromium 中，您可以查看计算样式。在 FF 中你需要 Firebug 来查看计算样式，在 Opera 中使用 firefly

【讨论】：

【解决方案2】：

打开Firefox，安装Firebug 右键点击你想要的元素，选择Inspect element然后打开Computed区域

您将所有样式应用于该元素

这在Chrome、Safari、Opera和IE自带的开发工具中有效

Opera（DragonFly 已经安装了 Opera）

Firefox（需要FireBug插件）

Internet Explorer（需要IE Developer Toolbar 插件）

Chrome 和 Safari（Web Inspector 已经是 Chrome 和 Safari 的一部分）

【讨论】：

图像已损坏。
但是如何全部复制呢？还是将它们与另一个元素进行比较？

【解决方案3】：

使用类似 FireBug 或 Chrome 的开发者工具来检查 DOM 并查看哪些样式应用于相关元素。

【讨论】：

【解决方案4】：

一句话：

Firebug.

使用 Firebug 检查元素，然后您可以看到级联。更好的是，您可以复制并粘贴直接从 FB 到 CSS 文件。

如果你想使用其他浏览器，你也可以使用他们预装的开发者工具（IE 中的 F12（需要 IE 开发者工具栏）右键单击 - 检查 chrome 中的元素）或者你可以使用Firebug Lite。 :)

【讨论】：

Firebug 只适用于一个浏览器，它是一个插件。 Chrome、Safari 和 Opera 已经拥有自己的 firebug 开箱即用 :)
更新了我的答案以反映:)

【解决方案5】：

IE8：点击F12-->点击“Select element by click”（白色箭头，图标菜单最左边）-->返回网页，点击你喜欢的元素-->返回IE的开发者工具页面，你会看到右侧列出的整个样式。

其他人已经回答了其他浏览器。 :)

【讨论】：

【解决方案6】：

更新：作为@tank answers below，当您在开发工具检查器中右键单击元素时，Chrome 版本 77 添加了“复制样式”。

使用 Javascript 最适合我。我是这样做的：

打开 Chrome DevTools 控制台。

将这个dumpCSSText函数从this stack overflow answer粘贴到控制台，然后点击Enter：

function dumpCSSText(element){
  var s = '';
  var o = getComputedStyle(element);
  for(var i = 0; i < o.length; i++){
    s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
  }
  return s;
}

使用 Chrome 时，您可以检查元素并在控制台中使用 $0 变量访问它。 Chrome also has a copy command，所以使用这个命令复制所有被检查元素的css：
```
copy(dumpCSSText($0));
```
将 CSS 粘贴到您喜欢的任何位置！ ?

【讨论】：

这是一个很棒的提示，我喜欢它！我要补充一点，如果您发现自己经常使用它，您可以使用 Dev Tools 很少使用的 Snippets 功能将其永久保存在浏览器中。在使用之前，您需要为每个新的 Dev Tools 实例运行它，但它比复制和粘贴要好。或者，您可以制作一个书签。另外，我会在属性值之后添加一个换行符“\n”，但这是个人喜好。

【解决方案7】：

Chrome 77 现在在“检查元素”选项卡的上下文菜单中包含 Copy styles。

右击Element > Inspect > Right click on the element in the opened Elements tab > Copy > Copy styles

【讨论】：

我收到了很多以-- 开头的东西，比如--fusion-audio-max-width-default: 100%; 和--header_border_color: #e5e5e5; 这在Chrome 中是否损坏？
@HMR 不，这些是 CSS 变量。