Cambiar el tamaño de la letra usando dos links - [JavaScript][AiTeee][Tutorial][#2]

**AiTeee** · 06-sep-2011

Hoy crearemos un script JS, para elevar un tamaño de letra o disminuirlo usando solo un link para ampliar y otro para disminuir.

( Veréis que los códigos como por ejemplo el function o el for los abro y no los cierro, eso se debe a que el código lo explico por partes, pero va todo junto y se cierra más tarde, lo veréis en el código completo. )

Empezaremos crando un documento js por ejemplo: "fuentesizer.js".

Empezaremos son una variable que seleccionará los tags con una array que se verán afectados por el script.

Código:

var tags = new Array( 'div','td','tr');

Definimos la variable donde incluimos los tamaños a usar.

Código:

var tamanos = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );

Indicamos una variable para definir el tamaño inicial de la fuente.

Código:

var tamanoini = 2;

Utilizamos una función y seleccionamos el documento.

Código:

function ts( focus,inc ) {
if (!document.getElementById) return

Definimos 3 variables con valores.

Código:

var d = document,celda = null,sz = tamanoini,i,j,cTags;

Si sz < 0 seguira siendo 0 // Si sz es mas grande que 6 se quedara siendo 6 y asi evitas que suba de numero

Código:

sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;

El tamaño inicial sera = al sz una ves cambiado. Evitamos que cuando cambien el tamaño cuelva a 0.

Código:

tamanoini = sz;

Si celda = al focus de sz / celda obtendrá el mamaño de sz.

Código:

if ( !( celda = d.getElementById( focus ) ) ) celda = d.getElementsByTagName( focus )[ 0 ];
celda.style.fontSize = tamanos[ sz ];

Mientras I = 0 el tamaño de los tags será incrementado.

Código:

for ( i = 0 ; i < tags.length ; i++ ) {

Lo mismo con J

Código:

cTags = celda.getElementsByTagName( tags[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = tamanos[ sz ];
}
}

Y fnalizamos el Javascript.
Ahora abriremos nuestro .html en mi caso "index.html".

*Abrimos e tag html.

Código HTML:

<html>

*Abrimos tag head.

Código HTML:

<head>

Insertamos el javasctipt externo a la html.

Código HTML:

<script type="text/javascript" src="fuentesize.js"></script>

*Cerramos el head.

Código HTML:

</head>

*Abrimos body.

Código HTML:

<body>

Y ponemos los dos links que usarán el js para aumentar y reducir la fuente.

Código HTML:

<a href="javascript:ts('body',1)">+ Larger Font</a> | <a href="javascript:ts('body',-1)">+ Smaller Font</a>

*Cerramos body

Código HTML:

</body>

*Y concluimos cerrando hmtl.

Código HTML:

</html>

( Los puntos con un "*" quieren decir que no son necesarios para poner los links, es decir es una orientación para los que no estén muy introducidos aun en el mundo de html y estén empezando, orientan donde deben poner los tags. )

CODIGO COMPLETO:

"fuentesizer.js"

Código:

// Seleccionamos los Tags que se veran afectados por el scipt
var tags = new Array( 'div','td','tr');

// Definición de variables
var tamanos = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
// Tamaño inicial
var tamanoini = 2;

// Utilizamos una funcion
function ts( focus,inc ) {
if (!document.getElementById) return
// Definimos 3 variables mas con un "valor"
var d = document,celda = null,sz = tamanoini,i,j,cTags;

// Si sz < 0 seguira siendo 0 // Si sz es mas grande que 6 se quedara siendo 6 y asi evitas que suba de numero.
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
// el tamaño inicial sera = al sz una ves cambiado. Evitamos que cuando cambien el tamaño cuelva a 0
tamanoini = sz;
// Si celda = al focus de sz / celda obtendrá el mamaño de sz.
if ( !( celda = d.getElementById( focus ) ) ) celda = d.getElementsByTagName( focus )[ 0 ];
celda.style.fontSize = tamanos[ sz ];

// Mientras I = 0 el tamaño de los tags será incrementado.
for ( i = 0 ; i < tags.length ; i++ ) {
// Lo mismo con J
cTags = celda.getElementsByTagName( tags[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = tamanos[ sz ];
}
}

"index.html"

Código:

<html>

<head>
<script type="text/javascript" src="fuentesizer.js">


</script>
</head>

<body>

<a href="javascript:ts('body',1)">+ Larger Font</a> | <a href="javascript:ts('body',-1)">+ Smaller Font</a>

</body>

</html>

Archivos:

Código:

index.html
fuentesizer.js

Espero que les sirva. Gracias por visitas y comentar ^^

baduser · 07-sep-2011

**cramercaba** · 07-sep-2011

**carmen10** · 07-sep-2011

**Hectorsito20** · 08-nov-2011

Exelente amigo

06-sep-2011	#1
AiTeee Aprendiendo Ingreso: septiembre-2011 Ubicación: Manresa, Spain Mensajes: 54 Sexo: País: Signo: Agradecido: +94	Cambiar el tamaño de la letra usando dos links - [JavaScript][AiTeee][Tutorial][#2] Hoy crearemos un script JS, para elevar un tamaño de letra o disminuirlo usando solo un link para ampliar y otro para disminuir. ( Veréis que los códigos como por ejemplo el function o el for los abro y no los cierro, eso se debe a que el código lo explico por partes, pero va todo junto y se cierra más tarde, lo veréis en el código completo. ) Empezaremos crando un documento js por ejemplo: "fuentesizer.js". Empezaremos son una variable que seleccionará los tags con una array que se verán afectados por el script. Código: var tags = new Array( 'div','td','tr'); Definimos la variable donde incluimos los tamaños a usar. Código: var tamanos = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' ); Indicamos una variable para definir el tamaño inicial de la fuente. Código: var tamanoini = 2; Utilizamos una función y seleccionamos el documento. Código: function ts( focus,inc ) { if (!document.getElementById) return Definimos 3 variables con valores. Código: var d = document,celda = null,sz = tamanoini,i,j,cTags; Si sz < 0 seguira siendo 0 // Si sz es mas grande que 6 se quedara siendo 6 y asi evitas que suba de numero Código: sz += inc; if ( sz < 0 ) sz = 0; if ( sz > 6 ) sz = 6; El tamaño inicial sera = al sz una ves cambiado. Evitamos que cuando cambien el tamaño cuelva a 0. Código: tamanoini = sz; Si celda = al focus de sz / celda obtendrá el mamaño de sz. Código: if ( !( celda = d.getElementById( focus ) ) ) celda = d.getElementsByTagName( focus )[ 0 ]; celda.style.fontSize = tamanos[ sz ]; Mientras I = 0 el tamaño de los tags será incrementado. Código: for ( i = 0 ; i < tags.length ; i++ ) { Lo mismo con J Código: cTags = celda.getElementsByTagName( tags[ i ] ); for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = tamanos[ sz ]; } } Y fnalizamos el Javascript. Ahora abriremos nuestro .html en mi caso "index.html". Abrimos e tag html. Código HTML: <html> Abrimos tag head. Código HTML: <head> Insertamos el javasctipt externo a la html. Código HTML: <script type="text/javascript" src="fuentesize.js"></script> Cerramos el head. Código HTML: </head> Abrimos body. Código HTML: <body> Y ponemos los dos links que usarán el js para aumentar y reducir la fuente. Código HTML: <a href="javascript:ts('body',1)">+ Larger Font</a> \| <a href="javascript:ts('body',-1)">+ Smaller Font</a> Cerramos body Código HTML: </body> Y concluimos cerrando hmtl. Código HTML: </html> ( Los puntos con un "*" quieren decir que no son necesarios para poner los links, es decir es una orientación para los que no estén muy introducidos aun en el mundo de html y estén empezando, orientan donde deben poner los tags. ) CODIGO COMPLETO: "fuentesizer.js" Código: // Seleccionamos los Tags que se veran afectados por el scipt var tags = new Array( 'div','td','tr'); // Definición de variables var tamanos = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' ); // Tamaño inicial var tamanoini = 2; // Utilizamos una funcion function ts( focus,inc ) { if (!document.getElementById) return // Definimos 3 variables mas con un "valor" var d = document,celda = null,sz = tamanoini,i,j,cTags; // Si sz < 0 seguira siendo 0 // Si sz es mas grande que 6 se quedara siendo 6 y asi evitas que suba de numero. sz += inc; if ( sz < 0 ) sz = 0; if ( sz > 6 ) sz = 6; // el tamaño inicial sera = al sz una ves cambiado. Evitamos que cuando cambien el tamaño cuelva a 0 tamanoini = sz; // Si celda = al focus de sz / celda obtendrá el mamaño de sz. if ( !( celda = d.getElementById( focus ) ) ) celda = d.getElementsByTagName( focus )[ 0 ]; celda.style.fontSize = tamanos[ sz ]; // Mientras I = 0 el tamaño de los tags será incrementado. for ( i = 0 ; i < tags.length ; i++ ) { // Lo mismo con J cTags = celda.getElementsByTagName( tags[ i ] ); for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = tamanos[ sz ]; } } "index.html" Código: <html> <head> <script type="text/javascript" src="fuentesizer.js"> </script> </head> <body> <a href="javascript:ts('body',1)">+ Larger Font</a> \| <a href="javascript:ts('body',-1)">+ Smaller Font</a> </body> </html> Archivos: Código: index.html fuentesizer.js Espero que les sirva. Gracias por visitas y comentar ^^ La inteligencia es algo con lo que se nace, pero algo que también se cultiva

07-sep-2011	#3
cramercaba Erudito Ingreso: noviembre-2009 Mensajes: 9.213 Sexo: País: Agradecido: +11.824	La vida es lo que pasa mientras se instalan las actualizaciones de Windows

07-sep-2011	#4
carmen10 Erudito Ingreso: agosto-2010 Ubicación: En Andalucia Mensajes: 17.081 Sexo: País: Signo: Agradecido: +22.675	*El que busca la verdad corre el riesgo de encontrarla.*

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
. Cambiar BootSkin de Windows 7 [Concurso 2011]	nokiajavi	Tutoriales & Videos Tutoriales	12	29-jul-2011 23:57
Cambiar el tamaño de una foto "Online".	jchierro	Imagen & Fotografía	2	24-nov-2010 23:33

Los siguientes 4 usuarios agradecen a AiTeee por este mensaje:
baduser (07-sep-2011), carmen10 (07-sep-2011), cramercaba (07-sep-2011), Eloy58 (06-sep-2011)

07-sep-2011	#2
baduser Banned Ingreso: julio-2009 Ubicación: Mexico City, Capital del Mundo Mensajes: 33.485 Sexo: País: Signo: Agradecido: +70.458

Usuarios que han agradecido este mensaje de baduser
carmen10 (07-sep-2011)

Los siguientes 2 usuarios agradecen a cramercaba por este mensaje:
baduser (07-sep-2011), carmen10 (07-sep-2011)

Usuarios que han agradecido este mensaje de carmen10
baduser (07-sep-2011)

08-nov-2011	#5
Hectorsito20 Desarrollador HTML5 & CSS3 Ingreso: octubre-2011 Ubicación: Republica Dominicana, Punta Cana Bávaro Mensajes: 157 Sexo: País: Signo: Agradecido: +445	Exelente amigo

Usuarios que han agradecido este mensaje de Hectorsito20
cramercaba (08-nov-2011)

(0 miembros y 1 visitantes)