YUI Library Examples: Dom Collection: Using addClass

Dom Collection: Using addClass

Clicking the button will use Dom's addClass method to add the class baz to the element.

foo

Using addClass

addClass, part of the YUI Dom Collection, makes it easy to add a given className to an element.

The first thing we need to do is load the Dom source file and dependencies:

To illustrate the use of addClass, we'll create a <div> called foo with the className of bar. When the button is clicked, we will add the className baz to the element.

Add some markup for the demo element and a button to trigger the demo:

Now we will define the function that adds the class baz to the foo element. The first argument of the addClass method is either the ID of an HTMLElement, or an actual HTMLElement object. The second is the className to be added.

To trigger the demo, we will use the YUI Event Utility's on method to listen for clicks on the button.

This is a simple example of how to use the Dom.addClass method. One of the benefits of this method is that it works regardless of how many classNames are present in the class attribute.

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Dom Collection Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings