YUI Library Home

YUI Library Examples: Dom Collection: Using hasClass

Dom Collection: Using hasClass

Clicking the button will use Dom's hasClass method to test if the element has the class baz applied.


Using hasClass

hasClass, part of the YUI Dom Collection, makes it easy to test whether a given className is present on an element.

To illustrate the use of hasClass, we'll create a <div> called foo with the className of bar and baz. When the button is clicked, we will test whether the className baz is present.

Add some markup for the demo element:

Now we will define the function that tests whether foo has the className baz applied. The first argument of the hasClass method is either the ID of an HTMLElement, or an actual HTMLElement object. The second is the className we are testing for. The hasClass method returns true or false, depending on whether the className exists on the element.

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 YAHOO.util.Dom.hasClass method. One of the benefits of this method is that it works regardless of how many classNames are present in the class attribute.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More Dom Collection Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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