CSSOM Lab

Medium
4
64.7% Acceptance

In this lab, we will work with the CSS Object Model (CSSOM) API through JavaScript to manipulate styles of an HTML document. The main task involves creating two buttons - one to apply styles to a paragraph, and another to reset these styles.

Concepts

The key concepts utilized in this lab are:

  • JavaScript HTML DOM - To interact and manipulate HTML.
  • CSS Object Model (CSSOM) - To apply CSS and styles via JavaScript.
  • Event Listeners - To respond to user interactions.

Steps

Follow these steps to complete the lab:

  1. Start by creating an HTML file. Name it 'index.html'. In this file, create a button with the id 'applyStyles' and a paragraph element with the id 'target'.

  2. Now create a JavaScript file 'script.js' that will contain the workings of our lab. Link this script file in your HTML document.

  3. Use the document.getElementById method to select the 'applyStyles' button. Assign an event listener to this button that responds to click events.

  4. Inside the event listener, target the paragraph element by its id 'target' using document.getElementById. Then, manipulate the paragraph's style properties - fontSize, fontStyle, and color - as per the requirements.

  5. Next, create another button 'resetStyles' directly through JavaScript using document.createElement('button').

  6. Similar to what we did for the 'applyStyles' button, assign an event listener to the 'resetStyles' button. Inside this event listener, reset the paragraph's styles to their original state by setting the style properties to an empty string.

  7. Append this 'resetStyles' button to the document's body using document.body.appendChild.

Hints

  • Remember to step through your JavaScript code slowly, making sure to correctly target the HTML elements.
  • Ensure the event listeners are correctly attached and function as expected.
  • Be careful with the spellings and case-sensitivity of the method names and properties used in JavaScript.