|
|
change text color of a submit button
The coloring of text is extremely important, as it is the part of the page that conveys the most information and thus effect on your users. We use the style.color attribute to assign a new color and an onMouseOver event to trigger the assignment. The new color value is a static named color in this example, but it doesn’t always have to be – you can substitute the static value with a variable name and use a different function to arrive at the color value your users prefer, for example.
The coloring method may be named colors, hex colors or RGB colors. You aren’t limited to applying only a text color change. You may also apply any formatting options available via the DOM reflection of every CSS rule. These rules are part of the style attribute and there are many of them. Simply provide another legal style directive on another line within the JavaScript function in the HEAD of the document.
<html>
<head>
<script type="text/javascript">
function changeColor(color) {
document.getElementById('x').style.color=color;
}
</script>
</head>
<body>
<p>This example demonstrates how to change the text color of a button.</p>
<p>Mouse over the three colored table cells, and the text color will change:</p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"></td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"></td>
</tr>
</table>
<form>
<input id="x" type="button" value="Mouse over the colors">
</form>
</body>
</html>
It should be noted that if you would like to change back to the original color, a different JavaScript function would have to be created to do this. You would usually trigger the change with an onMouseOut event handler that calls this new function.
|
|
