Javascript - Cambio de las propiedades del texto. 
Cambio de las propiedades del texto con Javascript:
Este será el resultado:
Explicaremos aquí mismo el desarrollo del proceso.
Entre las etiquetas <body></body>Creamos un división llamada <div id="texto"> donde incluiremos el texto que queremos modificar. En otras divisiónes (controles y controles2) incluiremos los radiobotones, casillas de verificación y menus desplegables que contendrán los valores a modificar:
<div id="controles">Tamaño del texto
<select id="tamanyo" onchange="formato()">
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
Tipo de texto
<select id="tipo" onchange="formato()">
<option value="arial">arial</option>
<option value="verdana">verdana</option>
<option value="geneva">geneva</option>
<option value="georgia">georgia</option>
</select>
color del texto
<select id="color" onchange="formato()">
<option value="#000000">negro</option>
<option value="#CCCCCC">gris</option>
<option value="#6699FF">azul</option>
</select>
</div>
<div id="controles2">
Negrita
<input name="negrita" type="checkbox" value="negrita" id="negrita" onclick="formato()"/>
Cursiva
<input type="checkbox" name="cursiva" value="checkbox" id="cursiva" onclick="formato()"/> Subrayado
<input type="checkbox" name="subrayado" value="checkbox" id="subrayado" onclick="formato()"/>
Alineación
<input name="a" type="radio" value="si" id="izquierda" onclick="formato()"/> Izq
<input name="a" type="radio" value="si" id="derecha" onclick="formato()"/> Der
<input name="a" type="radio" value="si" id="centro" onclick="formato()"/> Cen
<input name="a" type="radio" id="justificado" onclick="formato()" value="si"/>
Jus
</div>
Como veis en cada elemento de formulario llamamos a la función que ahora vamos a configurar, onchange="formato()" para los menús deplegables y onclick="formato()" para las casillas de verificación y radiobotones.
Entre las etiquetas <head></head> de nuestro documento escribimos nuestro javascript:
<script language="javascript" type="text/javascript">
<!--
Creamos un función llamada formato donde declaramos las diferentes variables asociadas a la propiedad que deseamos cambiar:
function formato(){
var tam_texto;
tam_texto=parseInt(document.getElementById("tamanyo").value);
document.getElementById("texto").style.fontSize=tam_texto + "pt";
var tipo_texto;
tipo_texto=document.getElementById("tipo").value;
document.getElementById("texto").style.fontFamily=tipo_texto;
var color_texto;
color_texto=document.getElementById("color").value;
document.getElementById("texto").style.color=color_texto;
var negrita;
negrita=document.getElementById("negrita").checked;
if(negrita==true){
document.getElementById("texto").style.fontWeight="bold";}
else{
document.getElementById("texto").style.fontWeight="normal";}
var cursiva;
cursiva=document.getElementById("cursiva").checked;
if(cursiva==true){
document.getElementById("texto").style.fontStyle="italic";}
else{
document.getElementById("texto").style.fontStyle="normal";}
var subrayado;
subrayado=document.getElementById("subrayado").checked;
if(subrayado==true){
document.getElementById("texto").style.textDecoration="underline";}
else{
document.getElementById("texto").style.textDecoration="none";}
var alineacion;
if(document.getElementById("izquierda").checked==true)
alineacion="left";
if(document.getElementById("derecha").checked==true)
alineacion="right";
if(document.getElementById("centro").checked==true)
alineacion="center";
if(document.getElementById("justificado").checked==true)
alineacion="justify";
document.getElementById("texto").style.textAlign=alineacion;
}
//-->
</script>
Finalmente si deseamos que se cargen los valores por defecto de las propiedades al cargar la página, en el evento onLoad del Body llamamos a la función formato():
<body onload="formato()">
Hu Creative Web Site - info@hucreative.com
www.hucreative.com