Section 16.5. Scripting CSS Classes


16.5. Scripting CSS Classes

An alternative to scripting individual CSS styles through the style property is to script the value of the HTML class attribute through the className property of any HTML element. Dynamically setting the class of an element can dramatically alter the styles that are applied to the element, assuming that the class you use is appropriately defined in a stylesheet. This technique is used in Example 18-3, a form-validation example that appears later in the book. The JavaScript code in that example sets the className of form elements to "valid" or "invalid" depending on whether the user's input was valid or not. Example 18-2 includes a simple stylesheet that defines the "valid" and "invalid" classes so that they alter the background color of the input elements in a form.

One thing that you must remember about the HTML class attribute and the corresponding className property is that it may list more than one class. In general, then, when scripting the className property, it is not a good idea to simply set and query this value as if it contains a single class name (although, for simplicity, this is what is done in Chapter 18). Instead, you need a function to test whether an element is a member of a class, and functions to add and remove classes from an element's className property. Example 16-7 shows how to define those functions. The code is simple but relies heavily on regular expressions.

Example 16-7. Utility functions for manipulating className

 /**  * CSSClass.js: utilities for manipulating the CSS class of an HTML element.  *  * This module defines a single global symbol named CSSClass. This object  * contains utility functions for working with the class attribute (className  * property) of HTML elements. All functions take two arguments: the element  * e being tested or manipulated and the CSS class c that is to be tested,  * added, or removed. If element e is a string, it is taken as an element  * id and passed to document.getElementById().  */ var CSSClass = {};  // Create our namespace object // Return true if element e is a member of the class c; false otherwise CSSClass.is = function(e, c) {     if (typeof e == "string") e = document.getElementById(e); // element id     // Before doing a regexp search, optimize for a couple of common cases.     var classes = e.className;     if (!classes) return false;    // Not a member of any classes     if (classes == c) return true; // Member of just this one class     // Otherwise, use a regular expression to search for c as a word by itself     // \b in a regular expression requires a match at a word boundary.     return e.className.search("\\b" + c + "\\b") != -1; }; // Add class c to the className of element e if it is not already there. CSSClass.add = function(e, c) {     if (typeof e == "string") e = document.getElementById(e); // element id     if (CSSClass.is(e, c)) return; // If already a member, do nothing     if (e.className) c = " " + c;  // Whitespace separator, if needed     e.className += c;              // Append the new class to the end }; // Remove all occurrences (if any) of class c from the className of element e CSSClass.remove = function(e, c) {     if (typeof e == "string") e = document.getElementById(e); // element id     // Search the className for all occurrences of c and replace with "".     // \s* matches any number of whitespace characters.     // "g" makes the regular expression match any number of occurrences     e.className = e.className.replace(new RegExp("\\b"+ c+"\\b\\s*", "g"), ""); }; 




JavaScript. The Definitive Guide
JavaScript: The Definitive Guide
ISBN: 0596101996
EAN: 2147483647
Year: 2004
Pages: 767

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net