How to Change the Color with js of an Element

If you want to change the color in js of any element. By using style property you can change the color in js of the entire website. You can create a template file for future use. So if you need to change color according to your theme you can simply use the code. In this article, we describe how to change the color of the user interface.

You can also create it for users like you change the color theme for your mobile. If users want to see their website in a dark mode they can. So this article will really help you with doing that.

JavaScript is a fun game but the condition is you to know many functions and properties of JavaScript. Through this article, I will help you with many functions or properties of JavaScript. I also promise to you all, that you will cover many things about JavaScript. Now it’s time to code.

let’s begin Change the Color in js.

  1. create a file with extension .HTML
  2. Now create a JavaScript file with a .js extension (you can also use the internal JavaScript. It all depends on you. )
  3. Now using <script> tag integrate the js file in your HTML file. (If you are not using the external file you can simply add <script> tag and you can start in the script tag only. )
  4. Now it’s time to add some additional tags to the HTML file. You can add any tag or if you want to change the color of the existing site you may directly write javascript code in your js file.

In Your js file create a variable.

var p = document.getElementsByTagName('p')

When you write this code in your Js file you just create a variable named p. In variable p u will get the entire paragraph tag in your variable p. Now you need to access all the p tags. If you don’t know how to access them check out our article for accessing dom in js.

Do you hear about console.log? If yes then check your variable p in console.log(). If you didn’t hear about console.log, don’t worry you will understand about that. Just put this code in your js file after your variable.


In console.log just put p without single or double quote.

Why we don’t use single quote or double quote for variable?

In JavaScript or any other language, there are Data types. These data types decide that what kind of data are returned. If you enclose the variable with single or double quotes that variable will become a string. Now it never returns any kind of value it always gives the same value which is u enclosed by a single or double quote. So never use a single or double quote for any variable.

Now execute your HTML file. You won’t see anything here instead of HTML content. Because the console.log() only works in the console window.

How to open console window in google chrome?

You can easily open your google chrome’s console window. By using following steps.

  1. Open your google chrome.
  2. Now right-click anywhere on your google chrome screen.
  3. Click on the last option INSPECT.
  4. A window that is part of google chrome will appear on your right side. In that window, you find out the console window.

In console you can see the result

Change the Color in js of any element

You can see in console.log that you get an array. This array is a collection of the entire p tag which you get from dom. Now it’s time to change the color of a particular paragraph. Now remove your console.log(p) line. If you don’t want to remove that one keep that line as it is.

p[0].style.color = 'red'

Now refresh or execute your HTML file. You can see that our first paragraph’s color already changed. If you want to change this color by click on the button then create a function, and call that function on a particular button. By using the “onclick” event in HTML. Or follow the given code.

var p var p = document.getElementsByTagName('p')

    function colorChanger()
      p[0].style.color = 'red';

Add the colorChange() in your html tag. By using onclick event.

<button type="button" onclick="colorChange()"> Click Here!!! </button>

If you want to change the entire paragraph’s color. You need to add for loop in the function for changing the color in js.

  var p = document.getElementsByTagName('p')
    function colorChanger()
      for(i=0; i < p.length; i++)
          p[i].style.color = 'red';

By using this code your entire p tag’s color will change while u click on a button. Now you can easily change the color in js by click on buttons.

Hope this article must help you change the color in js. For more tips and tricks Bookmark our site.

Leave a Comment