JavaScript Manipulating Document Elements

Styling

We can manipulate the CSS styling of our document either by directly modifying style attributes of an element or by specifying the CSS classes that should be applied to it.

Code example: setting attributes

Copy
<h2>My emotions has three outlets:</h2>

<script>
  const h2 = document.querySelector("h2")
  h2.style.color = "red"
</script>

In the example above we set the color of the <h2> element to red.

Code example: setting classes

Copy
<h2>My emotions has three outlets:</h2>

<script>
  const h2 = document.querySelector("h2")
  h2.setAttribute('class', "title dark")
</script>

In the example above we set the <h2> element's class attribute to "title dark".