JavaScript – Change Text Font Color in HTML

 

Change font color by style of id of tag with color attribute in javascript.

Demo

<html>
<head>
<title>Change Font Color JavaScript</title>
<script>
function changeColor()
{
  document.getElementById("color1").style.color="#FF0000";
  document.getElementById("color2").style.color="#FFFF00";
  document.getElementById("color3").style.color="#339933";
  document.getElementById("color4").style.color="#0000FF";
  document.getElementById("color5").style.color="#FF6600";
}

function defaultColor()
{
  document.getElementById("color1").style.color="";
  document.getElementById("color2").style.color="";
  document.getElementById("color3").style.color="";
  document.getElementById("color4").style.color="";
  document.getElementById("color5").style.color="";
}
</script>
</head>

<body>
<span id="color1">Red color</span><br>
<span id="color2">yellow color</span><br>
<span id="color3">green color</span><br>
<span id="color4">blue color</span><br>
<span id="color5">orange color</span><br> <br>
<a href="javascript:changeColor()">Change Font Color JavaScript</a>
<br> <br>
<a href="javascript:defaultColor()">Change default Font Color JavaScript</a>
</body>
</html>