JavaScript library for getting and setting CSS stylesheet rules
Branch: master
Clone or download
dvtng Merge pull request #40 from bronzehedwick/patch-1
Add syntax highlighting to README code snippets
Latest commit 29adabd Jun 12, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Add new tests and minified version Mar 23, 2014
.gitignore Add gulp tasks for minification and watching Mar 23, 2014
README.markdown
bower.json
demo.html Add support for retrieving all styles added via JSS, fix issues in Fi… Mar 16, 2014
gulpfile.js Add gulp tasks for minification and watching Mar 23, 2014
jss.js Inline code to retrieve node from sheet and vice versa now that earli… Mar 23, 2014
jss.min.js
package.json Add gulp tasks for minification and watching Mar 23, 2014

README.markdown

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