JavaScript Change Font Color Based On Value
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of JavaScript change font color based on value, we will change the font colors in any HTML page using JavaScript. Also, we will change the font-size using JavaScript.
For doing so, we are going to use the JavaScript eventListner tag. Let us know about the tag first.
addEventListner: A web page responds to an event. Events can be created by users or by APIs. An event listener is a JavaScript process that watches for the occurrence of an event.
Syntax for addEventListner:
addEventListener(type, listener)
in the example below, we will change the font color and the font size by giving input at the <input> tag in HTML page.
Step By Step Guide On JavaScript Change Font Color Based On Value :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript change font color based on value </title>
<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> JavaScript change font color based on value </h3>
</center>
<br>
<div>
font color change on value
</div>
<br>
<input type="text" />
<script>
let text = document.querySelector("div") ,
input = document.querySelector("input") ;
input.addEventListener("input", () => {
text.style.color = input.value;
text.style.fontSize = input.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
- <h1> tag used to add a heading close it with </h1> tag
- Create a <div> and write some text under it
- Now create a <input> tag with the type of text
- To write JavaScript, create a <script> tag
- Create a variable using let and select the HTML <div> tag using document.querySelector()
- Also select the input tag using document.querySelector().
- Use .addEventListner tag first.
- .style property to give font color and font size by using value property.
- Now by providing font color or the font size as input, the respected properties will change of <div> of the HTML file
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to change font color based on value using JavaScript.
I hope this article on JavaScript change font color based on value helps you and the steps and method mentioned above are easy to follow and implement
About Amruta
