Submodule 14.1: Introduction to DOM

As you already know, we can change the styles of the HTML elements using DOM.

In order to be able to change the style, you should first define the element to which you want to apply the new style (using for example getElementById) and then write .style.property. 

The general type to do that is: document.getElementById(id).style.property = new style

Additinaly, to apply styles to element's children the general type is: document.getElementById(id).children[x].style.property = new style

In the below code we will see some examples of changing the styles of element's children.

Code:

Exercise

1. Open your editor, create a new file and save it as exersice14.1.4.html in the folder "yourNameWEB2JS".
2. Copy the code below and paste it in the new file.
3. See the results.

Answer:

4. 4. Modify the above code to change the background of the third ul item to orange.

Answer: