The Web Developer Bootcamp 2024

Colt Steele

Back to DOM Index Page

Changing Styles
Information

In order to change styles thru JavaScript, we're going to need some basic information.

Let's assume we want to change some styling for an [h6] tag on a webpage. We would first need to select it with:

  • document.querySelector('h6');   // if there is only one [h6] tag on the page, or
  • document.querySelectorAll('h6')[x];   // where [x] represents the Node Object number of the specific [h6] element that you are targeting, if there are multiple [h6] tags on the page.
For the purposes of this discussion, we are going to assume that we are dealing with a webpage that only has one [h6] tag. Also, we can assign this [h6] tag to a variable to simplify the coding, like so:
  • const head6 = document.querySelector('h6');

We will use the [h6] tag at the beginning of this section for reference [< h6>Information< /h6>].

So, from the console, if we call head6, it would return

  • < h6>Information< /h6>

*We also need to understand that when you change HTML STYLES with JavaScript, you are adding, or changing Inline styles ONLY. While it is not normally considered "good practice" to use inline styles, JavaScript has no way of determining if there are multiple style sheets applied to a webpage, or what ALL of the styles might be. So it is forced to use the Inline Styles for changes, which would overwrite any styles created by any external style sheets.

Retrieving Current Styles

At some point, we may need to know what the current styling is. Now, if we call:

  • head6.style
it would return a CSSStyleDeclaration {}, which is an object list of ALL of the Inline style properties applied to the head6 element. You would notice that most, if not all of these styles consist of "" empty strings, because any styling has been done through an external style sheet, and not through Inline Styles.

What this means is, if we had applied a color, say olive to our [h6] element through a separate style sheet, and we called:

  • head6.style.color
it would return "" (empty string) because the color was applied by an external style sheet and not locally through an Inline Style. But if we applied the olive color through an Inline Style and made the same call:
  • head6.style.color
it would return "olive" because this style was created through an Inline Style.

Another note of importance is camelCase. In CSS we write calls such as text-decoration, or font-size with a hyphen. But in JavaScript, we don't use a hyphen, we use camelCase, such as textDecoration, or fontSize. So in the CSSStyleDeclaration {}, you will see all of the styles listed, in camelCase.

Since the CSSStyleDeclaration {} does NOT contain ALL of the styles that may be applied to an element, (it only list's the "inline" styles), we must use a different method to list all of the styles that are currently applied to an element.

The Only way to list what ALL of the currently used styles, that are being used for this HTML Element, is to use the Window Method. The syntax would be:

  • window.getComputedStyle(head6);
this will also return a CSSStyleDeclaration {}, but this object will list ALL of the currently applied properties for this HTML Element.

*note you can also look for specific properties of the window.getComputedStyle(head6) object, like so:

  • window.getComputedStyle(head6).color,   or
  • window.getComputedStyle(head6).fontSize

Changing Styles

Now, changing styles is fairly straight forward, but we need to remember that we are changing or adding Inline Styles Only.

Previously we used the example:

  • const head6 = document.querySelector('h6');
but we now have several [h6] elements on the page, so we need to modify our variable assignment to be more specific, like so:
  • const head6 = document.querySelector('h6')[2];
This will target the [h6] element which is < h6>Changing Styles< /h6>

If we look up the current color:

  • head6.style.color
it would return "" an empty string because there are no Inline Styles applied to this element. but if we call:
  • head6.style.color = 'olive';
you can see that the text color for this [h6] element has changed to olive, and if we call head6, it would return:
  • < h6 style="color: olive;">Changing Styles< /h6>
showing that it did indeed add the inline style.

and now if we call:

  • head6.style.color, it would return:
    • 'olive'
And finally, if we use window.getComputedStyle(head6).color; to list the color Object Property for this element we see:
  • color: "rgb(128, 128, 0)"
which is the RGB designation for 'olive'.

Back to Top