How to change CSS styles using javascript

When we start working with real-world projects, sometimes, we need to change the CSS styles using Javascript.

The most common task is hiding or revealing some HTML elements.

So, in this lesson, we will learn:

1. How to reveal the modal using Javascript.
2. How to change the background color of the modal using Javascript.

The task: Revealing the modal

We can achieve this task in two easy steps:

//Step 1: Select the Discount Modal element
let discountModal = document.querySelector("#surprise-discount-modal");

//Step 2: Change the display property of the element to "block"
discountModal.style.display = "block";

Here is what's happening.

As usual, First, we are selecting the "Discount modal" element.

let discountModal = document.querySelector("#surprise-discount-modal");

This will return the "Discount modal" element in the form of a javascript object and it will have a nested object called style.

discountModal = {
    style : {
        display: "none",
        backgroundColor: "black",
        position: "fixed"
    }
} 

And the main purpose of the style object is to help us change the CSS styles of an HTML element.

Basically, it will have access to all the CSS properties of an HTML element.

For example, if you notice the above image, there is a CSS property called display on the style object.

So, in order to reveal the "Discount modal", all we have to change the value of display property to block:

discountModal.style.display = "block";

In the above code:

1. First, we are accessing the style object of the modal.
2. Then using the style object, we are getting access to the CSS display property of the modal.
3. Finally, we are changing the value of display property to "block" to reveal the modal.

That's all you need to do.

The above code adds an inline style to the "Discount modal" element directly:

And this will make the modal visible on top of the main page.

If you now open up the index.html in the browser, you should see the "Discount modal" again:

Simple enough?

Come on, go ahead and implement this.

Task: Changing the background color

Anyway, the good thing is, we can use the same technique to change other CSS styles too.

For example, here is how to change the background color of the modal.

discountModal.style.backgroundColor = "#3c496d";

This results in:

Easy, right?

We can not use hyphens

A lot of CSS property names contain hyphens.

For example: background-color, font-size, border-radius, z-index, etc.

But when we try to reference the above CSS property names in Javascript, we can not use hyphens.

Instead, we have to use a camelCase version of those property names.

For example: backgroundColor, fontSize, borderRadius, zIndex, etc.

There is a good reason behind this.

In javascript or any other programming language, the character hyphen - is reserved for performing mathematical operations only.

For example:

1 - 1;
12 - 57 / 100;
(100 - 10) + 99;

So, we can not use hyphens - for other purposes.

For example, when we can not use a hyphen - when naming or referencing:

1. Variable names
2. Object property names
3. Function names

//this is wrong
element.style.font-size = "16px";

//this is wrong
let modal-element = document.querySelector("#modal");

//this is wrong
function show-modal(){
    modal-element.style.z-index = 1;
}

If we try to use hyphens for other purposes, javascript will throw an error.

discountModal.style.background-color = "#3c496d";

For example, when the above code is executed, javascript will try to subtract the word "background" from a variable name color.

In other words, javascript see the above code as:

discountModal.style.background minus color = "#3c496d";

But anywhere in our code, did we create a variable name called color?

No, right?

So, it throws an error.

So instead of using -, javascript uses a camelCase naming system to avoid the problem altogether.

//this is correct
element.style.fontSize = "16px";

//this is correct
let modalElement = document.querySelector("#modal");

//this is correct
function showModal(){
    modalElement.style.zIndex = 1;
}

Keep this in mind.

Anyway, there are a couple of problems with the code for revealing the modal and we will fix them in the next lesson.