https://github.com/dvtng/jss

JavaScript library for getting and setting CSS stylesheet rules
https://github.com/dvtng/jss

Last synced: about 23 hours ago
JSON representation

JavaScript library for getting and setting CSS stylesheet rules

• Host: GitHub
• URL: https://github.com/dvtng/jss
• Owner: dvtng
• Created: 2011-02-16T06:47:18.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2017-10-19T13:25:13.000Z (about 7 years ago)
• Last Synced: 2024-10-10T07:36:01.517Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 81.1 KB
• Stars: 335
• Watchers: 22
• Forks: 54
• Open Issues: 19
• Metadata Files:
  • Readme: README.markdown

Awesome Lists containing this project

README

        
# JSS

A simple JavaScript library for retrieving and setting CSS stylesheet rules.

* Tiny - only 4KB minified

* No dependencies

* MIT Licensed

* Supports FF, Chrome, Safari, Opera, and IE9+

Why generate CSS with JavaScript?

* To set styles that need to be calculated or retrieved

* To set behavioural styles for your widget or plugin so that consumers aren't forced to include a stylesheet for core functionality

* To dynamically apply styles without cluttering your HTML (as is the case with inline styles)

* To set styles on all current and future elements

## Usage

Download and include `jss.js` (or the minified file) in your HTML:

```html

```

If your project uses Bower for package management you can run the following command instead:

    bower install jss

**jss.set(selector, properties)** to add a new rule or extend an existing rule:

```js

jss.set('.demo', {

    'font-size': '15px',

    'color': 'red'

});

```

**jss.get([selector])** to retrieve rules added via JSS:

```js

jss.get('.demo');

// returns the following:

{

    'font-size': '15px',

    'color': 'red'

}

    

jss.get();

// returns the following:

{

    '.demo': {

        'font-size': '15px',

        'color': 'red'

    }

}

```    

**jss.getAll(selector)** to retrieve all rules that are specified using the selector (not necessarily added via JSS):

```js

jss.getAll('.demo');

// returns the following:

{

    'font-size': '15px',

    'color': 'red',

    'font-weight': 'bold'

}

```

**jss.remove([selector])** to remove rules added via JSS:

```js

jss.remove('.demo'); // removes all JSS styles matching the selector

jss.remove();        // removes all JSS styles

```