Friday , 17 November 2017
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.

Conclusion

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.

http://www.w3schools.com/js/js_htmldom_css.asp

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link