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

How can I grab all css styles of an element?

提问by János

If I like an element of a site, and I want to implement it into my site, what is the easiest way to do it? Sometimes there is a lot of CSS files, that is hard to follow all of them.

如果我喜欢网站的某个元素，并且想将其实施到我的网站中，那么最简单的方法是什么？有时有很多 CSS 文件，很难全部掌握。

采纳答案by balexandre

open Firefox, install Firebugright click on the element you want, choose Inspect elementand then open the Computedarea

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

you will have ALL STYLESapplied to that element

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

This is valid in Chrome, Safari, Opera and IE with their own development tools

这在 Chrome、Safari、Opera 和 IE 中都有效，它们有自己的开发工具

Opera(DragonFlyis already installed with Opera)

Opera（DragonFly已经安装了 Opera）

Firefox(Needs FireBugplugIn)

Firefox（需要FireBug插件）

Internet Explorer(Needs IE Developer Toolbarplugin)

Internet Explorer（需要IE Developer Toolbar插件）

Chrome& Safari(Web Inspectoris already part of Chrome and Safari)

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

回答by kevnk

UPDATE:As @tank answers below, Chrome version 77 added "Copy Styles" when you right-click on an element in the devtools inspector.

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

---

---

Using Javascript worked best for me. Here's how I did it:

使用 Javascript 对我来说效果最好。这是我如何做到的：

1. Open Chrome DevTools console.

2. Paste this dumpCSSTextfunction from this stack overflow answerinto the console, and hit 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. When using Chrome, you can inspect an element and access it in the console with the $0variable. Chrome also has a copycommand, so use this command to copy ALL the css of the inspected element:

   copy(dumpCSSText(
   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;
   }
   ));
   

4. Paste your CSS wherever you like!

1. 打开 Chrome DevTools 控制台。

2. 将此堆栈溢出答案中的此dumpCSSText函数粘贴到控制台中，然后点击：Enter

   copy(dumpCSSText(##代码##));
   

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

   ##代码##

4. 把你的 CSS 粘贴到任何你喜欢的地方！

回答by tank

Chrome 77 now has Copy stylesin the Context menu on the Inspect Element tab.

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

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

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

回答by Kyle

In one word:

总而言之：

Firebug.

萤火虫。

Use Firebug to inspect the element, then you can see the cascade. Even better, you can copy and pasteright out of FB to a CSS file.

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

If you want to use other browsers, you can also use their pre-installed developers tools (F12 in IE (requires the IE developers toolbar) right click - inspect element in chrome) or you can use Firebug Lite. :)

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

回答by Kumar

In chrome/Chromium you can look at computed style. In FF u will need Firebug to see computed style, in Opera use firefly

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

回答by Jon

Use something like FireBug or Chrome's developer tools to inspect the DOM and see what styles are applied to the element in question.

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

回答by Shadow Wizard is Ear For You

IE8: click F12 --> click "Select element by click" (the white arrow, left most in the icons menu) --> Go back to the web page, click the element you like --> Go back to the Developer Tools page of IE and you'll see the whole style listed to the right.

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

Others already answered for other browsers. :)

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