Style Change in DOM – JavaScript Series – Part 25

Today we are going to change the style of different elements in the dom using some new technique that we didn’t learned yet.

We are going you use the last day codes.

We’ll start by selecting the h1 and then we’ll apply some style with it. See when we use document.querySelector(“h1”).style

Now change the background of h1. Using document.querySelector("h1").style.background = "red"

See result –

Now lets try to add a class in h1 tag. Let’s write some styles in style.css

Using document.querySelector("h1").className = "special-heading"we can change right

What are you going to do after this? You have superpower now your hand to change anything in Dom!

Let’s learn something amazing in next one!

Other posts of this series can be found here – https://blog.nerdjfpb.com/tag/javascript/

View this post on Instagram

I've started this tutorial for the people who wanted to start javaScript. But there are so many long long tutorials for them. Also it need time to finish. So I tried to make this small and just one part in one day. Easy to take and within some days, you'll atleast able to understand the js and work with it. I'm not hoping that you'll learn advance topics, but atleast you'll learn the basics and it will help you in long run. We are going do the magic today, if we can change a color to red from black. How it will feelings? Without writing css we can do it 😶 Lets check this tutorial and let me know if you have any question. Also Check the git codes, if you need to check any — https://github.com/nerdjfpb/javaScript-Series . . . #Webdevloper #freelancewebdeveloper #freelancedeveloper #codinginspiration #responsivewebdesign #python3 #freecodecamp #uidesigners #learnprograming #buildupdevs #ecommercestartup #programmersday #javascriptdeveloper #appdesigner #startupusa #peoplewhocode #fullstackdevloper #fullstack #pythonprogramming #uiuxdesign #codelife #devlife #developerlife #programmerlife #coderlife #learntocode #Worldcode #codinglife #nerdjfpb

A post shared by Nerdjfpb : Tech Santoryu (@nerd_jfpb) on Feb 19, 2020 at 11:22pm PST

See the codes – https://github.com/nerdjfpb/javaScript-Series

Find me on social media – twitter, linkedin