Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 128

Visitas el mes pasado: 226

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




11. Texto y arrays (II)

11.2 Estilo del texto

javascript

En esta página vamos a ver una serie de métodos del objeto String, que se corresponden con etiquetas del lenguaje HTML, es decir, la misma modificación que puede hacer una etiqueta HTML en el texto, se hace con el método indicado. La mayoría de estos métodos modifican el estilo del texto: tamaño, cursiva, negrita, etc.

Recordemos que también podemos modificar el estilo del texto cambiando el estilo CSS del mismo mediante javascript, tal como se indica en la página 5.4. Atributos y código CSS de este manual.


Métodos de estilo

Los siguientes métodos modifican el estilo del texto, es decir varían el tamaño, la presentación, el color, etc.

big()

masGrande = texto.big() : Aumenta en un punto el tamaño del texto tal como lo haria la etiqueta html <big> ... </big>.

small()

masPequeno = texto.small() : disminuye en un punto el tamaño del texto tal como lo haria la etiqueta html <small> ... </small>.

bold()

negrita = texto.bold() : Pone el texto en negrita tal como lo haria la etiqueta html <b> ... </b>.

italics()

cursiva = texto.italics() : Pone el texto en cursiva tal como lo haria la etiqueta html <i> ... </i>.

fixed()

monotipo = texto.fixed() : Pone el texto en estilo monotype o espaciado fijo tal como lo haria la etiqueta html <tt> ... </tt>.

strike()

tachado = texto.strike() : Tacha el texto con una línea horizontal en medio, tal como lo haria la etiqueta html <strike> ... </strike>.

blink()

parpadeo = texto.blink() : pone el texto parpadeante, tal como lo haria la etiqueta html <blink> ... </blink>. este método no funciona en Internet Explorer.

sub()

subindice = texto.sub() : El texto se muestra como un subíndice, tal como lo haria la etiqueta html <sub> ... </sub>.

sup()

superindice = texto.sub() : El texto se muestra como un superíndice, tal como lo haria la etiqueta html <sup> ... </sup>.

fontcolor()

colorTexto = texto.fontcolor("color") : Cambia el color del texto al indicado en el parámetro que se le pasa en el paréntesis. El color puede indicarse en su nombre en inglés para ciertos colores, o en sistema hexadecimal. Se corresponde a la etiqueta html y su atributo <font color> ... </font>.

fontsize()

tamano = texto.fontsize(num) : Cambia el tamaño del texto al indicado en el parámetro que se le pasa en el paréntesis. Se corresponde a la etiqueta html y su atributo <font size> ... </font>.

La mayoría de estos métodos no suelen utilizarse ya que en su lugar suele usarse el acceso a estilo CSS para realizar los cambios en el texto. Por ejemplo para cambiar el texto a color azul utilizaremos:

texto.style.color = "blue"


metodo link()

Los métodos vistos anteriormente cambian el estilo o formato del texto. El método link() convierte el texto en un enlace, igual que la etiqueta <a href="url"></a>. En el parentesis le pasaremos como parámetro la URL o destino del enlace.

enlace = texto.link("http://google.com")

La siguiente página de ejemplo muestra un enlace al que previamente le podemos cambiar la página de destino, lo cual lo hacemos mediante este método:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Enlace múltiple</title> 
<script type="text/javascript">
function apuntar(dir) {
        elemento = document.getElementById("enlace") //acceder a enlace
        enlace = "Abrir Buscador" //quitar enlace y poner solo texto
        switch (dir) {
          case "google": //si se elige google ... 
            url = "http://google.es" //definir url
            document.getElementById("google").style.color = "red" //cambiar colores de texto
            document.getElementById("yahoo").style.color = "black"
            break;
          case "yahoo": //si se elige yahoo
            url = "http://es.yahoo.com" //definir url
            document.getElementById("yahoo").style.color = "red" //cambiar colores de texto
            document.getElementById("google").style.color = "black"
            break;
            }
        enlace = enlace.link(url) //poner nuevo enlace
        elemento.innerHTML = enlace	
        }
</script>
</head>
<body>
<h1>Elegir a donde apunta el enlace: </h1>
<h4 class="azul"><span id="google" onclick="apuntar('google')" >Página de Google</span> ... 
   <span id="yahoo" onclick="apuntar('yahoo')">Página de Yahoo</span></h4>
<h3 id="enlace"><a href="#"> Abrir Buscador</a></h3>
</body>
</html>

Puedes ver esta página de ejemplo en tu navegador pulsando en el siguiente enlace:

Enlace múltiple



Ejemplo de cambio de estilo con métodos de String

En la siguiente página de ejemplo el usuario puede cambiar el estilo de un párrafo gracias a los métodos de String. Como se observará en el código, los métodos los hemos puesto en el propio evento, que también llama a la función que luego reescribe el texto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Métodos de String</title> 
<style type="text/css">
body  { font-family: arial; }
#ejemplo { margin: 1em 5em;  }
#caja1 { margin: 0em 2em; width: 40%; float: left; }
#caja2 { margin: 0.5em 2em; width: 40%; float: right; }
</style>
<script type="text/javascript">
window.onload = function() {
elemento = document.getElementById("ejemplo") //acceder al texto
texto = elemento.innerHTML; 
texto1 = texto; //guardar una copia 
}
function imprimir() { //reescribir el texto
         elemento.innerHTML = texto
         }
function restablecer() { //volver al estado inicial.
         texto = texto1
         imprimir()
         }
</script>
</head>
<body>
<h1>Cambiar estilo con Javascript: Métodos de String </h1>
<h3>Texto de ejemplo:</h3>
<p id="ejemplo">En un lugar de la Mancha, de cuyo 
   nombre no quiero acordarme,no ha 
   mucho tiempo que vivía un hidalgo de los de lanza en 
   astillero, adarga antigua, rocín flaco y galgo corredor. 
   Una olla de algo más vaca que carnero, salpicón las más 
   noches, duelos y quebrantos los sábados, lentejas los 
   viernes, algún palomino de añadidura los domingos, 
   consumían las tres partes de su hacienda. 
<h4>Pulsa sobre los botones para cambiar la apariencia</h4>
<form action="#" name="estilo">
<p><input type="button" value="RESTABLECER" onclick="restablecer()" />
   para restablecer el ESTADO INICIAL del texto pulsa este botón.</p>
<div id="caja1">
<p><input type="button" value="aumentar tamaño" 
   onclick="texto = texto.big();imprimir()" />
   Método texto.big()</p>
<p><input type="button" value="Texto en negrita" 
   onclick="texto = texto.bold();imprimir()" />
   Método texto.bold()</p>
<p><input type="button" value="Letra monotype" 
   onclick="texto = texto.fixed();imprimir()" />
   Método texto.fixed()</p> 
</div>
<div id="caja2"></div>	
<p><input type="button" value="reducir tamaño" 
   onclick="texto = texto.small();imprimir()" />
   Método texto.small()</p>	  
<p><input type="button" value="Texto en cursiva" 
   onclick="texto = texto.italics();imprimir()" />
   Método texto.italics()</p>	
<p><input type="button" value="Texto en parpadeo" 
   onclick="texto = texto.blink();imprimir()" />
   Método texto.blink() (No en I. Explorer)</p>
</div>
<p>Cambiar color: Método texto.fontcolor('nombre_de_color'): Para 
cambiar de un color a otro pulsa antes en Restablecer.</p>
<p>
  <input type="button" value="Azul" 
    onclick="texto = texto.fontcolor('blue');imprimir()" /> ... 
  <input type="button" value="Rojo" 
    onclick="texto = texto.fontcolor('red');imprimir()" /> ...
  <input type="button" value="Marron" 
    onclick="texto = texto.fontcolor('maroon');imprimir()" /> ...
  <input type="button" value="Verde" 
    onclick="texto = texto.fontcolor('green');imprimir()" /> ...
  <input type="button" value="púrpura" 
    onclick="texto = texto.fontcolor('purple');imprimir()" /> ...	 
</p>
<p>Cambiar tamaño: Método texto.fontsize('num'): Para cambiar 
de un tamaño a otro pulsa antes en Restablecer.</p>
<p>
  <input type="button" value="tamaño 1" 
    onclick="texto = texto.fontsize(1);imprimir()" /> ... 
  <input type="button" value="tamaño 2" 
    onclick="texto = texto.fontsize(2);imprimir()" /> ... 
  <input type="button" value="tamaño 4" 
    onclick="texto = texto.fontsize(4);imprimir()" /> ... 
  <input type="button" value="tamaño 5" 
    onclick="texto = texto.fontsize(5);imprimir()" /> ... 
</p>
</form>
</body>
</html>

Puedes ver esta página de ejemplo en tu navegador pulsando en el siguiente enlace:

Estilo con métodos String





En la siguiente página veremos los métodos y propiedades de los arrays

El objeto Array



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com