DOM CSS

JavaScript HTML DOM - Changing CSS

The HTML DOM allows JavaScript to dynamically change the style of HTML elements. This can be done by directly manipulating inline styles or by managing CSS classes.

Changing Inline HTML Styles

You can change the inline style of an HTML element using the style property of the element object. The syntax is:

element.style.property = 'newValue';

Note that CSS properties with hyphens (e.g., background-color) are converted to camelCase in JavaScript (e.g., backgroundColor).

The following example changes the text color and font size of a <p> element:

<!-- HTML: -->
<!-- <p id="myParagraph">Hello World!</p> -->

<script>
  const pElement = document.getElementById("myParagraph");
  if (pElement) {
    pElement.style.color = "blue";
    pElement.style.fontSize = "20px";
    pElement.style.backgroundColor = "lightgray"; // Example of camelCase
  }
</script>

<!-- To see this in action, you'd need an HTML element like:
<p id="myParagraph">Hello World!</p>
<p>The paragraph above can be styled by the script.</p> -->

Managing CSS Classes (Recommended Practice)

A more robust and maintainable way to change styles is by adding or removing CSS classes. This keeps your CSS rules in your stylesheets and your JavaScript focused on logic.

Use the classList property:

• element.classList.add('className'): Adds a class.
• element.classList.remove('className'): Removes a class.
• element.classList.toggle('className'): Adds the class if it’s not present, removes it if it is.
• element.classList.contains('className'): Checks if the class is present (returns true/false).

Example:

/* CSS in your <style> tag or .css file: */
/*
.highlight {
  background-color: yellow;
  font-weight: bold;
}
.text-large {
  font-size: 24px;
}
*/

// JavaScript:
// const myDiv = document.getElementById('contentDiv');
// if (myDiv) {
//   myDiv.classList.add('highlight');
//   myDiv.classList.add('text-large');
//   // To remove a class later:
//   // myDiv.classList.remove('highlight');
//   // To toggle a class:
//   // myDiv.classList.toggle('text-large');
// }

// Example HTML to work with:
// <div id="contentDiv">This content can be styled by adding classes.</div>

Using Events to Trigger Style Changes

The HTML DOM allows you to execute JavaScript code when an event occurs, such as a button click, mouse hover, or page load. Modern practice uses addEventListener.

This example changes the style of an <h1> element when a button is clicked:

<!-- HTML: -->
<!--
<h1 id="mainHeading">My Dynamic Heading</h1>
<button id="styleButton">Change Style</button>
-->

<script>
  const heading = document.getElementById('mainHeading');
  const button = document.getElementById('styleButton');

  if (heading && button) {
    button.addEventListener('click', function() {
      // Using inline style change
      // heading.style.color = 'red';
      // heading.style.fontFamily = 'Arial, sans-serif';

      // Or, preferably, by toggling a class
      // CSS: .styled-heading { color: red; font-family: Arial, sans-serif; }
      heading.classList.toggle('styled-heading');
    });
  }
</script>

More Examples: Visibility

How to make an element visible or invisible:

• element.style.display = 'none'; (Hides the element and removes it from the document layout flow).
• element.style.display = 'block'; (Or inline, flex, etc., to show it again, restoring its original display type or a new one).
• element.style.visibility = 'hidden'; (Hides the element, but it still occupies space in the layout).
• element.style.visibility = 'visible'; (Makes the element visible again).
• Using the hidden attribute (recommended for semantic hiding): element.hidden = true; or element.hidden = false; This typically sets display: none; via browser stylesheet.

// const targetElement = document.getElementById('secretMessage');
// if (targetElement) {
//   // To hide:
//   // targetElement.style.display = 'none';
//   // OR
//   targetElement.hidden = true;

//   // To show later:
//   // targetElement.style.display = 'block'; // Assuming it was a block element
//   // OR
//   // targetElement.hidden = false;
// }

HTML DOM Style Object Reference

For a comprehensive list of all CSS properties accessible via the element.style object and their JavaScript camelCase equivalents, refer to the MDN Web Docs: CSS Properties Reference and DOM Style Object.