Change Font Color In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
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,
Element.style.CSSproperty = value ;
We will see on example using this below.
Step By Step Guide On Change Font Color In JavaScript :-
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> change font color in JavaScript </h3>
</center>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis fuga nulla voluptas dolor, iste in autem qui architecto omnis. Magnam.
</p>
<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>
</select>
<script>
function changeFontColor(e) {
document.body.style.color= e.value;
}
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- 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
- by using <p> tag write some paragraph.
- now create <select> tag with the onchange of a function with an argument.
- Creating some <option> tags and adding some color to each tag's value.
- To write JavaScript, create a <script> tag
- Now calling the function and pass an argument e
- Using document.body.style.color and equal it with e.value.
- 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.
About Pragati
