With MooCss you can write Css as Javascript objects (just like Element.Style) to a style tag in the document head
First you have to include the javascript files and css file in the head of your html document
#HTML
<script src="../Source/MooCss.js" type="text/javascript"></script>
There are two classes, MooCss and MooCssStyle. First you create a style for a selector, for example '.foo' and apply the styles. Secondly you add this MooCssStyle instance to the MooCss instance and call the MooCss.write method to actually write the CSS to your document head.
#JS
var style = new MooCss()
.setStyle(new MooCssStyle('.foo',{
background: '#FF9900',
color: 'white',
padding: 20
}))
.setStyle(new MooCssStyle('pre',{
border: '1px solid black'
}))
.setStyle({
'background': '#EEE'
},'body')
.write();
document.addEvent('click',function(){
style.setStyle(style.getStyle('body').set('font-weight','bold')).write();
});
#JS
new MooCss([options]);
- options - (object,optional) The MooCss Options. See below
- autoWrite - (boolean: defaults to false) If you set this to true, the write method will called automatically after you set a style with the setStyle method
- pretty - (boolean: defaults to false) If you want to make the css look pretty , you can set this to true (also try the getCss method to see how it looks)
- write - (function) The function to execute when the css is written
The function to set a style
#JS
css.setStyle(style[,selector]);
- style - (MooCssStyle instance,object) - A MooCssStyle instance or an object
- selector - (string,optional) - If the first argument was an object, you should set the selector here
- (MooCssStyle) - MooCssStyle instance
The function to get a style
#JS
css.getStyle(selector);
- selector - (string) - The selector of the style block
- (MooCssStyle) - MooCssStyle instance
The function to write the css to the stylesheet
#JS
css.write();
- (MooCssStyle) - MooCssStyle instance
If the styles are written to the stylesheet, you can fetch the css with this method
#JS
css.getCss();
- (string) - The css of the stylesheet
#JS
document.id(css);
- (element) - The style element
If the styles are written to the stylesheet, you can fetch the css with this method
#JS
css.getCss();
- (string) - The css of the stylesheet
#JS
var style new MooCssStyle(selector[,styles]);
- selector - (string) The CSS Selector
- styles - (object,optional) The properties and their values as object
The function to set another selector
#JS
style.setSelector(selector);
- selector - (string,optional) The CSS selector
- (MooCssStyle) - MooCssStyle instance
The function to set another selector
#JS
style.getSelector();
- (string) - The CSS selector
The function to set styles
#JS
style.set(property,value);
- property (string,object) The property. You can also use an object to set more properties
- value (string) The property value
- (MooCssStyle) - MooCssStyle instance
The function to get styles
#JS
style.get(property);
- property (string,array) The property. You can also use an array to get more properties
- (string,array) - The property value or values
Return the CSS string
#JS
style.toCss();
- (string) - The CSS