Friday , 21 September 2018
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

Audio

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.

ULTIMATE NODE JS WITH SQL COURSE
Want to learn how to create web applications with Node.js and SQL? Check out my course!
Get 93% off my course. You'll also learn how to build real world applications using Node and SQL. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link