All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

Change Font Color In JavaScript

Last Updated : Mar 11, 2024

Change Font Color In JavaScript

In this article we will show you the solution of change font color in JavaScript, we will change the font color of any HTML page using the JavaScript function.

The syntax of functions in JavaScript is,

function name(parameter1, parameter2,......) {
// block of code

And we will set the font color using style attribute in Javascript. The syntax is, = value ;

We will see on example using this below.

Step By Step Guide On Change Font Color In JavaScript :-

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> change font color in JavaScript </title>
    <link rel="stylesheet" href="">
            background-color: aliceblue;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
            color : rgb(95, 194, 95) ;
            font-size: 20px;
        <h1> TALKERSCODE </h1>
        <h3> change font color in JavaScript </h3>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis fuga nulla voluptas dolor, iste in autem qui architecto omnis. Magnam.
    <select name="FontColor" id="FontColor" onchange="changeFontColor(this)">
        <option value= "none"> Choose font color </option>
        <option value= "black">black</option>
        <option value= "pink">pink</option>
        <option value= "yellow">yellow</option>
        <option value= "green">green</option>
        <option value= "blue">blue</option>
        <option value= "darkolivegreen">darkolivegreen</option>
        <option value= "lightsalmon">lightsalmon</option>
        <option value= "honeydew">honeydew</option>
        <option value= "chocolate">chocolate</option>
            function changeFontColor(e) {
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. In order to style the HTML page, we'll utilize an external CSS file
  6. using <style> tag to add CSS
  7. create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
  8. by using <p> tag write some paragraph.
  9. now create <select> tag with the onchange of a function with an argument.
  10. Creating some <option> tags and adding some color to each tag's value.
  11. To write JavaScript, create a <script> tag
  12. Now calling the function and pass an argument e
  13. Using and equal it with e.value.
  14. Lastly, by selecting desired color to the HTML page we can change the font color.

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know How to change font color using JavaScript.

I hope this article on change font color in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪