Tuesday , 18 June 2019
Home / Programming / JavaScript / Change CSS – JavaScript Tutorial
Change CSS
Change CSS

Change CSS – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

JavaScript not only allows you to change the HTML in your document, but you can also change the styles of a certain element. The procedure to change CSS is straightforward. Let’s look at how to do this.

Updating the HTML

Update the <body> tags in your HTML document to this.

Next, let’s clear your script and add this bit of code.

To access the styles of your element, you first must access the style property of your element. Then, you type in the name of style you would like to change. You do not have to have a StyleSheet present in your HTML document. You also do not need to define a default style to change a style.

Your browser will automatically assign styles to elements if they aren’t set. Refresh your page and you should see your paragraph color change to the color red.

A common trick in JavaScript is hiding an HTML element.

Changing the Visibility

Add this line of code into your script.

This will hide your paragraph for you.

I highly recommend you set the default styles in your CSS file(s). This is because JavaScript takes a while to load and if you change styles when the page loads, then you won’t see the changes happen so quickly. If it’s one or 2 elements, it might be fast, but if you’re doing a ton of elements, then it’ll take a while. You should only change styles dynamically on events.


It doesn’t matter what element or style you want to change, you’re allowed to change it in JavaScript. By changing styles in JavaScript, there is a little lag. If you perform a group of changes at once, then you could potentially slow the speed of your site.If you would like more information about changing styles, then go here.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.