Working with DOM API’s in Google Chrome – classList

Posted by Nick on Apr 3, 2012 in Development Tips and Tricks |

By: Nick Stark – Seattle based UI Developer

Topics covered:

  • elem.classList

Setup:

Start by right clicking on an element within your webpage and select ‘Inspect element’.  This will bring up the chrome inspection tool.  Now hit the ‘esc’ key to bring up the console.  We are now ready to start using the console to manipulate the DOM.

We will be using $0 as a reference for which ever element is currently selected in the inspection tool.

elem.classList:

This is a useful tool for working with the class name of an element.  Adding and removing classes to a particular element.  In the example below we will be adding and removing the class name of Foo to a given element.

Adding

In the console type-

$0.classList.add(‘Foo’)

classList.add

classList

Inversely, do the opposite to remove the class.

$0.classList.remove(‘Foo’)

classList Remove

Another useful method of the classList Api is toggle.

$0.classList.toggle(‘Foo’);

Continue hitting your enter key and the resulting affect is a toggle add/remove of the class which you have passed in.

Leave a Reply

XHTML: You can use these tags:' <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Copyright © 2010-2014 Nick Stark All rights reserved.

DUI Magic - Seattle DUI Attorney