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

Question

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

Answer 1

使用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;
   }
   

3. 使用Chrome时,您可以检查元素并使用$0变量在控制台中访问它.Chrome也有一个copy命令,因此使用此命令复制被检查元素的所有css:

   copy(dumpCSSText($0));
   

4. 将CSS粘贴到您喜欢的任何地方!

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

Answer 3

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

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

Answer 4

就我个人而言，我会选择整个网站的 CSS，因为这会影响所选的元素。

1-转到控制台并运行此函数

function copyCSS(){
  let cssStyles = ''

  // Started at index 1 for index 0 is browser's user agent stylesheet.
  for (let i = 1; i < document.styleSheets.length; i++) {
    let style = null

    try {
      if (document.styleSheets[i]) {
        const classes =
          document.styleSheets[i].cssRules || document.styleSheets[i].rules

        if (classes) style = classes
      }
      for (const item in style) {
        if (style[item].cssText != undefined) cssStyles += style[item].cssText
      }
    } catch (e) {
      continue
    }

    
  }

  return cssStyles
}

2-在控制台中运行

copy(copyCSS())

您的剪贴板中包含所有 CSS。