- Being able to quickly access, modify, add
and remove classes, attributes
and inline styles from any element in the DOM,
is a bit like having a bag of tools on hand
to solve pretty much any problem.
Need to indicate a state change of an element?
Add or remove a class.
Need to pass data from one element to the other?
Add a data attribute.
Need to change the appearance of a specific element
for some reason?
Add an inline style.
In the previous practice assignment,
you familiarized yourself with accessing DOM elements
using the query selector and query selector all methods.
Now I want you to take this one step further
by actively modifying the elements you've targeted
by adding or removing classes,
attributes, and inline styles.
Here's some examples of what you can do.
Find an element and add two different classes
then remove only one of those new classes.
Add a new attribute to an element.
This can be a standard attribute
like source or alt if that's appropriate for that element
or it can be a data attribute
passing literally any data you want.
By the way data attributes follow the naming convention
data dash and then the name of the attribute.
Request the value of the attribute you added.
Change the value of that attribute you added.
Add some inline CSS to an element
by specifying the style property and setting its value.
And finally query the style of property
of an element in the console to get a list
of all the style properties available to you.