Learn YUI3: Working with Node – Part 2. AddClass, RemoveClass, ToggleClass, …

Here is second article on series. This article is going to talk about addClass, removeClass, toggleClass, replaceClass and hasClass.

YUI3
We will need HTML to work with. So here is the HTML that is used for example JavaScript code using YUI3.


Example- Dynamically assigning class, toggle class etc
<div class="example" style="width:200px;height:200;max-height:auto;">
	 .addClass('foo')
	.removeClass('foo')
	.toggleClass('foo')
	.hasClass('foo')
	.replaceClass('foo', 'bar')
</div>
<div>
<button id="toggleclass">Toggle Class. Add Red text class and remove on another click</button>
	<br/>
<button id="removeclass">Remove red and green text class</button>
	<br/>
<button id="changeclass">Change Class. Add Green text class.</button>
</div>

Now, YUI3 code:

Example YUI3 code for addClass, removeClass, hasClass and toggleClass:


Y.one('#toggleclass').on('click', function(e) {
		Y.one('.example').toggleClass('redText');
	});
	Y.one('#changeclass').on('click', function(e) {
		Y.one('.example').addClass('greenText');
	});
	Y.one('#removeclass').on('click', function(e) {
		if (Y.one('.example').hasClass('redText')) {
			Y.one('.example').removeClass('redText');
		}
		if (Y.one('.example').hasClass('greenText')) {
			Y.one('.example').removeClass('greenText');
		}
	});