https://github.com/krasimir/css-steal

Given DOM element returns styles applied to it and all its children.
https://github.com/krasimir/css-steal

Last synced: 3 months ago
JSON representation

Given DOM element returns styles applied to it and all its children.

• Host: GitHub
• URL: https://github.com/krasimir/css-steal
• Owner: krasimir
• License: mit
• Created: 2015-09-05T15:43:52.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-08T08:56:25.000Z (over 9 years ago)
• Last Synced: 2024-09-15T22:21:54.427Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.32 MB
• Stars: 57
• Watchers: 7
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# CSS steal

Given DOM element returns styles applied to it and all its children.

## Installation

```js

npm install css-steal

```

## Usage

```js

var CSSSteal = require('css-steal');

var css = CSSSteal(document.querySelector('.my-class'));

css.toCSSText(); // produces formatted CSS styles

css.toJS(): // returns an array of objects containing the styles

```

`CSSSteal` accepts multiple DOM elements. For example:

```js

var a = document.querySelector('.a-class');

var b = document.querySelector('.b-class');

var c = document.querySelector('.c-class');

var css = CSSSteal(a, b, c);

```

It merges the CSS used by the elements.

## Chrome extension

Download [here](https://chrome.google.com/webstore/detail/csssteal/ellabkgcnhflepncdcnelhgclfkgmanh).

![CSSSteal](http://krasimirtsonev.com/blog/articles/CSSSteal/css-steal.jpg)

## Development

```js

npm run dev

```

## Resources

* [CSSSteal - Chrome extension that extracts CSS](http://krasimirtsonev.com/blog/article/csssteal-chrome-extension-that-extracts-css)

* [StackOverflow: Find all CSS rules that apply to an element](http://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element)