Classes > ObservableArray > Object

Classes is a special observable array given to all elements. All classes are represented as a string. Whenever objects are added or removed from this this array, the “class” attribute or “className” value is modified to reflect the changes. Below is an example:

$Element("myEl").Classes.Add("blogClass");
$Element("myEl").Classes.Add("header");

/* the element "myEl" name has the className "blogClass header" */
$Element("myEl").Classes.Clear();

/* the element no longer has classes applied to it */
$Element("myEl").Classes.AddRange(["red", "green", "blue"]);

/* the element now has the className "red green blue" */

 

Alternatively, using ClassName to modify the class of the element will be reflected in the Classes array, as shown below:

$Element("myEl").ClassName("header article child");

$Element("myEl").ForEach(function(){
    alert(this);
});

/* this will first alert "header", then "article" then "child" */

 

Using classes can be used to dynamically apply and unapply classes to elements. Especially useful in controls where clicking on an item may “select” it, so you could use something as such:

function selectElement(element){
    currentElement.Classes.Remove("selected");
    currentElement = element;
    currentElement.Classes.Add("selected");
}

Last edited Mar 26, 2011 at 5:39 PM by dahrkdaiz, version 3

Comments

No comments yet.