w4mana / jss

JavaScript library for getting and setting CSS stylesheet rules

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:

<script type="text/javascript" src="jss.js"></script>

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:

jss.set('.demo', {
    'font-size': '15px',
    'color': 'red'
});

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

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):

jss.getAll('.demo');
// returns the following:
{
    'font-size': '15px',
    'color': 'red',
    'font-weight': 'bold'
}

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

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