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.
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.
<head>
<title>Javascript Change Text Color Style</title>
<script language="javascript" type="text/javascript">
{
}
</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>
<input type="button" value="Change Div text color" onclick="changeDivTextColor()" />
<input type="button" value="Change Span text color" onclick="changeSpanTextColor()" />
<input type="button" value="Change Paragraph text color" onclick="changeParaTextColor()" />
</body>
</html>
Above Javascript example shows how to change the font color of HTML elements link Div, span and paragraph.
Be the first to rate this post
Tags: javascript, dom, javascript getelementbyid, javascript change text color, html elements, html div tag, html p tag, html span tag, javascript dom, document object modeling, dhtml, dynamic html, javascript document object
10/11/2008 3:26:07 AM
