31: How To Change CSS Using JavaScript | Document Object Model Tutorial | JavaScript Tutorial

In this JavaScript tutorial you will learn how to change CSS using JavaScript as well as creating CSS.

➤ CHECK OUT THESE AWESOME PEOPLE!

Daniel Simionescu
Meet Daniel: another Full-Stack developer who can teach you coding fast and free :D

➤ GET ACCESS TO MY LESSON MATERIAL HERE!

First of all, thank you for all the support you have given me!

I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!

I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.

I hope you will find it helpful :)

[avinashgunturu]

Bro suggest me a best laptop under 60000 for programming

[hussein]

Dude I don’t usually comment but EVERY second of this video was helpful, thanks a bunch

[temporarydisposable]

Hello Beginners ... here is a tip for you ... while looking at the css and javascript of "INSTAGRAM", i was trying to learn how to do text transform ( or scaling of placeholders like "username" or "password") when we click the input field . I noticed that professional web developers Just make a "class attribute in css" which in not yet given to any tag in html and then with help of javascript add that class to required html tag which changes html by adding new class to that tag and properties of that tags get change Lets understand with example: <h1 class = "class1"> TEXT COLOUR </h1>

NOW in css: .class1{colour:RED} // it gives red colour to "TEXT COLOUR"
.class2{colour:GREEN} //wait but we dont have 'class2' name in html

Adding class2 via JS: i am not expert in JS so just for your understanding

if (mouse hover on element h1 ) then modify html tag "h1" to <h1class = "class1 class2"> //this will change colour from red to green similarly we can remove "class2" if mouse is not hovering on h1 ...

HOPE you Understand .... WHY we need this ?? because we can keep our javascript code neat and clean without adding bulk css in javascript

[TinyMaths]

Wow. This is really helpful. I'm just building a small timing app and needed to have it so I can change CSS values using JS. I've done it before, but I had no idea (silly really) that you could check all the styling applied to a particular element/class (at least within HTML) - that's very, very useful.
I love those kind of tips because I can open up the JS and apply it immediately; thanks a bunch!

[budokan]

👍🤘Very good! Very well prepared, WITHOUT bullshit, WITHOUT lame jokes, WITHOUT exaggerated stupid shows, terse, right to the target, focused to the subject. This is what I wanted, I'm subscribed man.

[PnCodeBreaker]

Great.. Really the way you teach is really great... I have a request could you make a real world project based video..
I am currently following your PHP tutorial and it's really the best PHP tutorial..

[RiazKhan-uvwx]

You are the only one of my best teacher

[finalsecretofchrono]

Thanks bro. Your outro music is my 'enemy defeated, 20 exp gained' music.

[DavidAshby]

Hi, I am using css grid, I have my pages loading dynamically. Now I want to change the content area, eg 1 page will have an aside and the other won't. Which is the best way to go about this? Use Javascript and have sepearate stylesheets, have page id's for each content area and depending on which nav href pressed load that specific stylesheet or is there a better way, perhaps JQuery? Thanks

[gauravnehare]

With the help of JS, when I click the button, an image should move from its original place to the new place (I did this succesfully) I just want to know that how should I add transition so that I can see the change slowly

[patriayvida]

Hi... great video. Thanks for sharing. BTW, what text editor do you use?

[emmanuelkwabenankrumah]

Can you please do a tutorial on jquery slide menu ?!! It’s common on modern sites such as coinbase, hodly etc .. I don’t see much videos on YouTube on them .. thank you

[emetsalt]

Do you know how I could select a specific element without selecting all of the elements?

[SpiffyFurFamily]

Please make a set of tutorials in javascript that has only exercises in it. Like the 2 games you created. Exercise and practice is so important and I think it would help a lot to have guided step by step small programs to apply the fundamentals. It's often something overlooked by instructors.

[dumbcat]

i am working on a project that i did not create. i can see the elements i want to change in the developer tools window, but i cannot find those elements anywhere in the code. it's like the elements are being generated at runtime. i am having difficulty targeting them

[kokrochina]

i need change style from js, i have two card and i want one card stay at left and one at right, i dont remember how change js style

[loveparmar]

Great video! thanks for it sir! Love from India

[BreathOfHopePodcast]

I am seeing 2 JavaScript tutorials. The first one and this which is the updated one. Just to clarify please, does it mean I can go through this updated tutorial without going through the other one. Please respond

[aishahale]

Hey man love your tutorials, can you please tell me how to change css of a dynamically created element. I am not able to use getelementby id or class on these elements.

[mariogamer]

example: i'm trying to change color of youtube top bar with javascript. what do I do? the name or the bar primary color is i almost got it but it doesnt change cuz the rbg value i changed moved to "element.style" in the bar css. it needs to be in html:not(.style-scope). hope u understand something :)