JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

16.5 Scripting CSS Classes

16.5 Scripting CSS Classes

An alternative to scripting individual CSS styles through the inline style property is to script the value of the HTML classattribute. Changing an element’s classchanges the set of stylesheet selectors that apply to the element and can cause multiple CSS properties to change at the same time. Suppose, for example, that you want a way to draw the user’s attention to individual paragraphs (or other elements) of a document. You might start by defining attention-grabbing styles for any elements that have a class name of “attention”:

16.5 Scripting CSS Classes | 437

.attention { /* Styles to grab the user's attention */

background-color: yellow; /* Yellow highlight background */

font-weight: bold; /* Bold text */

border: solid black 2px; /* Black box */


The identifier class is a reserved word in JavaScript, so the HTML class attribute is available to JavaScript code using the name className. Here is code that sets and clears the className property of an element to add and remove the “attention” class for that element:

function grabAttention(e) { e.className = "attention"; } function releaseAttention(e) { e.className = ""; }

HTML elements can be members of more than one CSS class and the class attribute holds a space-separated list of class names. The className property has a misleading name: classNames would have been a much better choice. The functions above assume that the className property will specify zero or one class name and do not work when more than one class is in use. If an element already has a class assigned, calling the grabAttention() function for that element will overwrite the existing class.

HTML5 addresses this issue by defining a classList property for every element. The value of this property is known as a DOMTokenList: a read-only array-like object ( §7.11 ) whose elements contain the individual classnames for the element. More important than its array elements, however, are the methods defined by DOMTokenList. add() and remove() add and remove individual class names from the element’s class attribute. toggle()adds a classname if it is not already present and removes it otherwise. Finally, the contains() method tests whether the class attribute contains a specified classname.

Like other DOM collection types, a DOMTokenList is a “live” representation of the element’s set of classes, not a static snapshot of the classes at the time the classList property is queried. If you obtain a DOMTokenList from the classList property of an element and then change the className property of that element, those changes are immediately visible through the token list. Similarly, any changes you make through the token list are immediately visible through the className property.

At the time of this writing, the classList property is not supported by all current browsers. This important functionality is easy to approximate, however, with code like that of Example 16-5 . Using code like this that allows an element’s class attribute to be treated as a set of classnames makes many CSS scripting tasks much easier.

Example 16-5. classList(): treat className as a set of CSS classes


*Return the classList property of e, if it has one.*Otherwise, return an object that simulates the DOMTokenList API for e.*The returned object has contains(), add(), remove(), toggle() and toString()*methods for testing and altering the set of classes of the element e.*If the classList property is natively supported, the returned object is*array-like and has length and array index properties. The simulated*DOMTokenList is not array-like, but has a toArray() method that returns*a true-array snapshot of the element's class names.

*/ function classList(e) {

if (e.classList) return e.classList; // Return e.classList if it exists
else return new CSSClassList(e); // Otherwise try to fake it

// CSSClassList is a JavaScript class that simulates DOMTokenList function CSSClassList(e) { this.e = e; }

// Return true if e.className contains the class c, false otherwise

CSSClassList.prototype.contains = function(c) { // Check that c is a valid class name if (c.length === 0 || c.indexOf(" ") != -1)

throw new Error("Invalid class name: '" + c + "'"); // Check common cases first var classes = this.e.className; if (!classes) return false; // e has no classes at all if (classes === c) return true; // e has one class that matches exactly

// Otherwise, use a RegExp to search for c as a word by itself // \b in a regular expression requires a match at a word boundary. return"\\b" + c + "\\b") != -1;


// Add c to the e.className if it is not already present

CSSClassList.prototype.add = function(c) { if (this.contains(c)) return; // Do nothing if already present var classes = this.e.className; if (classes && classes[classes.length-1] != " ")

c = " " + c; // Add a space if we need one this.e.className += c; // Add c to the className };

// Remove all occurrences of c from e.className

CSSClassList.prototype.remove = function(c) { // Make sure c is a valid class name if (c.length === 0 || c.indexOf(" ") != -1)

throw new Error("Invalid class name: '" + c + "'"); // Remove all occurances of c as a word, plus any trailing space var pattern = new RegExp("\\b" + c + "\\b\\s*", "g"); this.e.className = this.e.className.replace(pattern, "");


// Add c to e.className if it is not already present and return true. // Otherwise, remove all occurrences of c from e.className and return false. CSSClassList.prototype.toggle = function(c) {

if (this.contains(c)) { // If e.className contains c this.remove(c); // then remove it. return false;


else { // Otherwise: this.add(c); // add it. return true;


16.5 Scripting CSS Classes | 439


// Return e.className itself CSSClassList.prototype.toString = function() { return this.e.className; };

// Return of the names in e.className CSSClassList.prototype.toArray = function() {

return this.e.className.match(/\b\w+\b/g) || []; };

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1