CSS getStyle and setStyletop #

Jelo.CSS contains cross-browser functions for examining and modifying the style of elements on the page, appropriately named getStyle and setStyle. They work on individual elements as well as Arrays, so you can handle as many elements at a time as you wish.

    /**
     * $ is short for Jelo.Dom.select, which returns the first element 
     * which matches your CSS selector. $$ is short for Jelo.Dom.selectAll,
     * which returns an Array of ALL matching elements.
     */
    var singleElement = $('#myPhotos');
    var manyElements = $$('#myPhotos img');
    
    // using a single element returns a single value, like "100px"
    alert(Jelo.CSS.getStyle(singleElement, 'height'));

    // using an array returns an array of values, like ["100px", "50px", ...]
    alert(Jelo.CSS.getStyle(manyElements, 'height'));
    
    // every image in this array now has a width of 50px
    Jelo.CSS.setStyle(manyElements, 'width', '50px');

Shorthand Syntaxtop #

    /**
     * The lowercase function Jelo.css is a shortcut; If you supply
     * two arguments, it's the same as calling Jelo.CSS.getStyle(arg1, arg2). 
     * If you supply three arguments, it's the same as calling
     * Jelo.CSS.setStyle(arg1, arg2, arg3).
     */
     
     // get the value (for example, "#000000")
     var before = Jelo.css(element, 'color'); 
     
     // set a new value
     Jelo.css(element, 'color', '#009900');
     
     // get the new value ("#009900")
     var after = Jelo.css(element, 'color');