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

Question

如果我喜欢网站的一个元素，并且我想将它实现到我的网站中，那么最简单的方法是什么？有时会有很多CSS文件，很难跟踪所有这些文件。

Answer 1

使用Javascript最适合我。以下是我的表现方式：

1. 打开Chrome DevTools控制台。

2. 将此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;
   }
   

3. 使用Chrome时，您可以检查元素并使用$0变量在控制台中访问该元素。 Chrome also has a copy command，所以使用此命令复制被检查元素的所有css：

   copy(dumpCSSText($0));
   

4. 将CSS粘贴到您喜欢的任何位置！

Answer 2

打开 Firefox ，安装 Firebug 右键单击所需元素，选择Inspect element，然后打开Computed区域

您将 ALL STYLES 应用于该元素

这在Chrome，Safari，Opera和IE中都有用自己的开发工具

Opera （ DragonFly 已经安装了Opera）

Firefox （需要FireBug插件）

Internet Explorer （需要IE Developer Toolbar插件）

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

Answer 3

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

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

Answer 4

总之：

Firebug

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

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

Answer 5

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

Answer 6

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

Answer 7

IE8：点击F12 - ＆gt;单击“通过单击选择元素”（白色箭头，图标菜单中最左侧） - ＆gt;返回网页，点击您喜欢的元素 - ＆gt;回到IE的Developer Tools页面，你会看到右边列出的整个风格。

其他人已经回答了其他浏览器。 ：）