ronlove;1261859 wrote:Can someone tell me if there is a way in javascript to globally make text in certain fields, RED, BOLD and a certain font.
Any help would be very appreciated!
Thanks,
Ron
A few minutes ...
<!DOCTYPE HTML>
<html>
<head>
<title> Example </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
</style>
</head>
<body>
<table border="0">
<tr>
<td> </td>
<td><input type="text" id="rc11" value="Row 1 - Col 1"></td>
<td><input type="text" id="rc12" value="Row 1 - Col 2"></td>
</tr>
<tr>
<td> Font-color </td>
<td><select onchange="adjust('rc11',this.value)">
<option value="Black"> Black </option>
<option value="Red"> Red </option>
<option value="Green"> Green </option>
<option value="Blue"> Blue </option>
</select>
</td>
<td><select onchange="adjust('rc12',this.value)">
<option value="Black"> Black </option>
<option value="Red"> Red </option>
<option value="Green"> Green </option>
<option value="Blue"> Blue </option>
</select>
</td>
</tr>
<tr>
<td> Background </td>
<td><select onchange="adjust('rc11',this.value)">
<option value="White"> White </option>
<option value="Yellow"> Yellow </option>
<option value="Orange"> Orange </option>
<option value="Cyan"> Cyan </option>
</select>
</td>
<td><select onchange="adjust('rc12',this.value)">
<option value="White"> White </option>
<option value="Yellow"> Yellow </option>
<option value="Orange"> Orange </option>
<option value="Cyan"> Cyan </option>
</select>
</td>
</tr>
<tr>
<td> Weight </td>
<td><select onchange="adjust('rc11',this.value)">
<option value="Normal"> Normal </option>
<option value="Bold"> Bold </option>
<option value="Bolder"> Bolder </option>
<option value="Lighter"> Lighter </option>
</select>
</td>
<td><select onchange="adjust('rc12',this.value)">
<option value="Normal"> Normal </option>
<option value="Bold"> Bold </option>
<option value="Bolder"> Bolder </option>
<option value="Lighter"> Lighter </option>
</select>
</td>
</tr>
<tr>
<td> Size </td>
<td><select onchange="adjust('rc11',this.value)">
<option value="Small"> Small </option>
<option value="Medium"> Medium </option>
<option value="Large"> Large </option>
</select>
</td>
<td><select onchange="adjust('rc12',this.value)">
<option value="Small"> Small </option>
<option value="Medium"> Medium </option>
<option value="Large"> Large </option>
</select>
</td>
</tr>
</table>
<script type="text/javascript">
function adjust(IDS,action) {
var sel = document.getElementById(IDS);
switch (action) {
case 'Normal': sel.style.fontWeight = 'normal'; break;
case 'Bold': sel.style.fontWeight = 'bold'; break;
case 'Bolder': sel.style.fontWeight = '900'; break;
case 'Lighter': sel.style.fontWeight = '200'; break;
case 'Black': sel.style.color = 'black'; break;
case 'Red': sel.style.color = 'red'; break;
case 'Green': sel.style.color = 'green'; break;
case 'Blue': sel.style.color = 'blue'; break;
case 'White': sel.style.backgroundColor = 'white'; break;
case 'Yellow': sel.style.backgroundColor = 'yellow'; break;
case 'Orange': sel.style.backgroundColor = 'orange'; break;
case 'Cyan': sel.style.backgroundColor = 'cyan'; break;
case 'Small': sel.style.fontSize = 'small'; break;
case 'Medium': sel.style.fontSize = 'medium'; break;
case 'Large': sel.style.fontSize = 'large'; break;
}
}
</script>
</body>
</html>
