Javascript Code to Change Text Color of HTML elements

Updated on 23 Mar 2012,
Published on 26 Jun 2008

Javascript DOM also allows to change the Text color of HTML elements dynamically. Text color of HTML element can be changed using document.getElementById method that takes the parameter as value of id attribute of any particular HTML element whose text color you want to change. You can change the text color of HTML div element, span tag or paragraph tag easily by specifying the unique values for their id attribute that can be accessed by using the getElementById method of document object of Javascript. style object of the getElementById method provides the reference to various CSS properties that can be changed dynamically using Javascript.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

Syntax of style object of getElementById to change text color

document.getElementById("id").style.color = "value";

You can pass the id of any HTML div element, span element or paragraph element that exits on your HTML document. The value should be a color name or hex color code that could be assigned to the text using this Javascript code. 

Javascript Example of Change Text Color of HTML elements

<html>
<head>
    <title>Javascript Change Text Color of HTML Elements</title>

    <script language="javascript" type="text/javascript">
    <![CDATA[
        function changeDivTextColor() {
            document.getElementById('div1').style.color = 'red';
        }

        function changeSpanTextColor() {
            document.getElementById('span1').style.color = '#0000ff';
        }

        function changeParaTextColor() {
            document.getElementById('para1').style.color = 'darkgreen';
        }
    ]]>
    </script>
</head>
<body>
    <div id="div1">
        Javascript will change the text color of this Div tag dynamically.
    </div>
    <p id="para1">
        This text is inside the HTML paragraph p tag. <span id="span1">This text inside the
            HTML span element placed inline to parapgraph p tag. </span>
    </p>
    <center>
        <input style="width: 250px" 
                type="button" 
                value="Change Div text color" 
                onclick="changeDivTextColor()" />
        <br />
        <br />
        <input style="width: 250px" 
                type="button" 
                value="Change Paragraph text color" 
                onclick="changeParaTextColor()" />
        <br />
        <br />
        <input style="width: 250px" 
                type="button" 
                value="Change Span text color" 
                onclick="changeSpanTextColor()" />
    </center>
</body>
</html>

Above Javascript example shows how to change the font color of HTML elements link Div, span and paragraph.

Output:

You can see the output of above discussed codes from the following link:

Change Text Color of HTML Elements

Continue to next tutorial: Javascript Show Hide Div Using Visibility to learn how to change the state of HTML element using JavaScript DOM style property.

5 Responses to "Javascript Code to Change Text Color of HTML elements"
HTML color codes are hexadecimal triplets representing the colors red, green, and blue. For example, in the the color red, the color code is FF0000, which is '255' red, '0' green, and '0' blue.
thanks dear
Good tutorial. Many thanks!!!
mido
thank you man
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email