By: Nick Stark – Seattle based UI Developer
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.
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.
In the console type-
Inversely, do the opposite to remove the class.
Another useful method of the classList Api is toggle.
Continue hitting your enter key and the resulting affect is a toggle add/remove of the class which you have passed in.