What's a Jelo Shot? How do I use these tutorials?

Tutorial: CSS Style and Class Manipulation

Getting and setting CSS properties is easy with Jelo, especially if you use the shorthand Jelo.css — Jelo knows whether you want to GET or SET based on how many arguments you provide. If you only give it an element and a property, Jelo.css returns the appropriate (and current) style. If you give it a property and a value, it automatically assigns the value.

Setting CSS Styles Cross-Browser: Example 1

// view a huge list of CSS properties

// target the first element with class "example"
var target = $(".example"); 

// standard form of this function: Jelo.CSS.setStyle
Jelo.CSS.setStyle(target, "background-color", "green");
Jelo.CSS.setStyle(target, "color", "white");

// shorthand alternative (notice the lowercase ".css")
Jelo.css(target, "background-color", "green");
Run the Jelo Shot above by clicking the orange icon.
Run it again to change the background color back to white.

Setting CSS Styles Cross-Browser: Example 2

// any CSS property can be changed
Jelo.css($(".example"), "font-weight", "bold");

// cross-browser opacity solution! no more MS filters
Jelo.css($(".example"), "opacity", "0.2");
Run the Jelo Shot above by clicking the orange icon.
Run it again to reset my font-weight and opacity.

Getting CSS Styles Cross Browser

// standard form of this function: Jelo.CSS.getStyle
var width = Jelo.CSS.getStyle($('.example'), "width");

// shorthand alternative (notice the lowercase ".css")
var height= Jelo.css($('.example'), "height");

alert("Width: " + width + "\nHeight: " + height);
Run the Jelo Shot above by clicking the orange icon.

Adding and Removing CSS Classes

<!-- CSS rules that apply for this example only -->
<style type="text/css">
    .example {
        background-color: white;
        border: 2px dashed blue;
        font-weight: normal;
        color: black;
    }
    .demo-error-message {
        background-color: red;
        border: 2px solid black;
        font-weight: bold;
        color: white;
    }
</style>

<script type="text/javascript">
    Jelo.on($(".target"), "click", function() {
        var me = $(".example");
        var isError = Jelo.CSS.hasClass(me, "demo-error-message");
        if (isError) {
            Jelo.CSS.removeClass(me, "demo-error-message");
        } else {
            Jelo.CSS.addClass(me, "demo-error-message");
        }
    });
</script>
Run the Jelo Shot above by clicking the orange icon.
You can also toggle my class by clicking inside this box.

See Jelo API for complete details.