如何获取元素的所有 css 样式？

Question

如果我喜欢网站的某个元素，并且想将其应用到我的网站中，最简单的方法是什么？有时有很多 CSS 文件，很难理解所有这些文件。

原文由 János 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新： 正如 @tank 在下面的回答，当您在开发工具检查器中右键单击一个元素时，Chrome 版本 77 添加了“复制样式”。

---

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

1. 打开 Chrome DevTools 控制台。
2. 将这个 dumpCSSText 函数从 这个堆栈溢出答案 粘贴到控制台，然后点击 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;
   }

1. 使用 Chrome 时，您可以检查一个元素并使用 $0 变量在控制台中访问它。 Chrome 也有一个 copy 命令，所以使用这个命令来复制被检查元素的所有 css：

    copy(dumpCSSText($0));

1. 将 CSS 粘贴到任何你喜欢的地方！ 🎉

原文由 kevnk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 的一部分）

原文由 balexandre 发布，翻译遵循 CC BY-SA 3.0 许可协议