Está en: Recursos web Javascript - Cambio de las propiedades del texto.

Cambio de las propiedades del texto con Javascript:




Con este javascript conseguiremos que el usuario de nuestro sitio pueda cambiar el tamaño del texto, el tipo de texto, que esté en negrita, cursiva, subrayado, alineado, color, de una sección determinada la página donde se aplica del script.

Este será el resultado:
Tamaño del texto Tipo de texto color del texto
Negrita       Cursiva      Subrayado      Alineación   Izq   Der   Cen   Jus 

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&nbsp;
<input name="negrita" type="checkbox" value="negrita" id="negrita" onclick="formato()"/>&nbsp;&nbsp;&nbsp;&nbsp;
Cursiva&nbsp;
<input type="checkbox" name="cursiva" value="checkbox" id="cursiva" onclick="formato()"/>&nbsp;&nbsp;&nbsp;&nbsp;Subrayado&nbsp;
<input type="checkbox" name="subrayado" value="checkbox" id="subrayado" onclick="formato()"/>
&nbsp;&nbsp;&nbsp;&nbsp;Alineación&nbsp;
<input name="a" type="radio" value="si" id="izquierda" onclick="formato()"/>&nbsp;Izq&nbsp;
<input name="a" type="radio" value="si" id="derecha" onclick="formato()"/>&nbsp;Der&nbsp;
<input name="a" type="radio" value="si" id="centro" onclick="formato()"/>&nbsp;Cen&nbsp;
<input name="a" type="radio" id="justificado" onclick="formato()" value="si"/>
&nbsp;Jus&nbsp;
</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()">

Inicio / Servicios Web / Recursos Web / Portfolio / Enlaces / Contacto / Sitemap / Aviso Legal

Hu Creative Web Site - info@hucreative.com
www.hucreative.com