开发者

How can I grab all css styles of an element?

开发者 https://www.devze.com 2023-02-16 20:38 出处:网络
If I like an element of a site, and I want to implement it into m开发者_JS百科y 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.UPDATE

If I like an element of a site, and I want to implement it into m开发者_JS百科y 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.


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


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

  1. Open Chrome DevTools console.
  2. Paste this dumpCSSText function from this stack overflow answer into 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 $0 variable. Chrome also has a copy command, so use this command to copy ALL the css of the inspected element:

    copy(dumpCSSText($0));
    
  4. Paste your CSS wherever you like!

0

精彩评论

暂无评论...
验证码 换一张
取 消