YUI Library Examples: Dom Collection: Using hasClass

Using hasClass

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

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


1	<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
2	<script type="text/javascript" src="../../build/dom/dom.js"></script>
	view plain \| print \| ?

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:


1	<div id="foo" class="bar baz">foo</div>
2	<button id="demo-run">run</button>
	view plain \| print \| ?

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.


1	<script type="text/javascript">
2	var testClass = function() {
3	alert(YAHOO.util.Dom.hasClass('foo', 'baz'));
4	};
5	</script>
	view plain \| print \| ?

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


1	<script type="text/javascript">
2	YAHOO.util.Event.on('demo-run', 'click', testClass);
3	</script>
	view plain \| print \| ?

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.

YUI Logger Output:

Logger Console

INFO 64ms (+0) 5:19:37 AM: 
Dom: 
addClass adding yui-log

INFO 64ms (+60) 5:19:37 AM: 
Dom: 
hasClass returning false

INFO 4ms (+4) 5:19:37 AM:

example:

The example has finished loading; as you interact with it, you'll see log messages appearing here.

INFO 0ms (+0) 5:19:37 AM: 
global: 
Logger initialized

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

Reload with logging
and debugging disabled.

YUI Library Examples: Dom Collection: Using hasClass

Using hasClass

YUI Logger Output:

Logger Console

Dom Collection Examples:

More Dom Collection Resources: