This code snippet helps you to create a change font color. It creates a web page that displays a paragraph with an id of “font” and four buttons. When the first button is clicked, the font size of the paragraph is changed to 30px. When the second button is clicked, the font color of the paragraph is changed to green. When the third button is clicked, the font family of the paragraph is changed to Arial. When the fourth button is clicked, the font size of the paragraph is changed to 13px. These changes are made using the document.getElementById method to access the paragraph element with id “font” and then setting its style properties such as fontSize, color and fontFamily using dot notation.
How to Create JavaScript Change Font Color Based On Value
Create the HTML structure for the change in font color as follows:
<html>
<body>
<h3>Change the paragraph below</h3>
<p id="font">Click all 4 buttons to see the changes.</p>
<script="text/javascript">
<button type="button" onclick="document.getElementById('font').style.fontSize='30px'">change the size (larger)</button>
<button type="button" onclick="document.getElementById('font').style.color='green'">change to green</button>
<button type="button" onclick="document.getElementById('font').style.fontFamily='Arial'">change the font family</button>
<button type="button" onclick="document.getElementById('font').style.fontSize='13px'">change the size (smaller)</button>
</script>
</body>
</html>
Now, style the change in font color using the following CSS styles:
.cd__main{
display: block !important;
}
#font{
font-size: 2rem;
color: blue;
}
That’s all! hopefully, you have successfully created the JavaScript change font color based on value. If you have any questions or suggestions, feel free to comment below.
