Skip to content
JavaScript library for getting and setting CSS stylesheet rules
JavaScript CSS
Branch: master
Clone or download
Pull request Compare This branch is 2 commits ahead, 32 commits behind dvtng:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
README.markdown
demo.html
jss.js

README.markdown

JSS v0.3

A simple JavaScript library for getting/setting CSS stylesheet rules.

  • Tiny - ~250 lines of code.
  • No dependencies.
  • MIT Licensed.

Usage

Download and include jss.js in your HTML:

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

Add new rule (or extend existing rule):

jss('.special', {
    color: 'red',
    fontSize: '2em',
    padding: '10px'
});

Retrieve existing rule:

jss('.special').get();

// Returns:
{
    'color': 'red',
    'font-size': '2em',
    'padding-bottom': '10px',
    'padding-left': '10px',
    'padding-right': '10px',
    'padding-top': '10px'
}

Remove existing rule:

jss('.special').remove();

Why generate CSS with JS?

  • To set styles that must be calculated or retrieved - for example, setting the user's preferred font-size or color from a cookie.
  • To set behavioural, rather than aesthetic, styles (especially for UI widget/plugin developers). Tabs, carousels, tooltips, etc. often require some basic CSS simply to function. Users of the code should not be forced to include a stylesheet for core functionality. Eye-candy CSS, of course, should still be added through regular stylesheets.
  • It's better than inline styles since CSS rules apply to all current and future elements, and don't clutter the HTML when viewing in Firebug / Developer Tools.
You can’t perform that action at this time.