|
|
change the background color of a textarea
Textarea spaces are usually fairly large, so they affect the appearance of your page in a big way. Coloring them can be a great way to add a unique impression upon your visitors. We use the style.background attribute to alter this. You may have the color change as the default color that is applied as the page loads or at any time according to user action.
We use an onMouseOver event to trigger the JavaScript function that is given in the HEAD of the document. The coloring method may be stated as a named color, hex color or RGB color.
<html>
<head>
<script type="text/javascript">
function newColor(color) {
document.getElementById('x').style.background=color;
}
</script>
</head>
<body>
<p>This example demonstrates how to change the background color of a textarea.</p>
<p>Mouse over the three colored table cells, and the textarea will change color:</p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="newColor('red')"></td>
<td bgcolor="blue" onmouseover="newColor('blue')"></td>
<td bgcolor="green" onmouseover="newColor('green')"></td>
</tr>
</table>
<form>
<textarea id="x" rows="5" cols="20"></textarea>
</form>
</body>
</html>
The new background color is stated as the argument passed to the newColor() function given in the JavaScript function stated in the HEAD of the document. You may use a variable or array item as the value. In this way the color to be applied can be decided by scripted action, such as per user preference selection.
| |
