Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


Accediendo a una marca HTML a través del DOM (getElementById




La primera función que nos provee el DOM a través del objeto document es:


document.getElementById("nombre del Id de la marca HTML")

Nos retorna una referencia a la marca en sí misma. Con esta referencia podemos acceder a sus propiedades como puede ser su contenido, color, fuente, etc. A esta función la emplearemos constantemente durante el curso.


Para disponer un ejemplo muy sencillo dispondremos una marca <h1> en la página y luego por medio de dos botones cambiaremos su color, y su tamaño de fuente.



El archivo html es el siguiente:



<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 id="titulo">Este es un título dinámico</h1>

<input type="button" value="Cambiar Color" onClick="cambiarColor()">
<input type="button" value="Cambiar Tamaño de Fuente"
onClick="cambiarTamanoFuente()">
</body>
</html>

Es importante notar que a los eventos para los dos botones los definimos en un archivo separado llamado funciones.js que lo incluimos con el siguiente código:



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

A la hoja de estilo también la definimos en un archivo separado que la incluimos con el siguiente código:



<link rel="StyleSheet" href="estilos.css" type="text/css">

Para poder acceder a la marca h1 debemos definir la propiedad id:



<h1 id="titulo">Este es un título dinámico</h1>

Para capturar los eventos de los dos botones inicializamos la propiedad onclick de cada botón:



<input type="button" value="Cambiar Color" onClick="cambiarColor()">
<input type="button" value="Cambiar Tamaño de Fuente"
onClick="cambiarTamanoFuente()">

Por otro lado definimos el archivo estilos.css:



#titulo {
text-align:center;
}
#boton1,#boton2 {
text-align:center;
width:200px;
}

y el archivo funciones.js:



function cambiarColor()
{
var tit=document.getElementById('titulo');
tit.style.color='#ff0000';
}

function cambiarTamanoFuente()
{
var tit=document.getElementById('titulo');
tit.style.fontSize=60;
}

Notemos que para recuperar una referencia a la marca h1 debemos indicar el siguiente código:



var tit=document.getElementById('titulo');

Ahora, en la varible tit tenemos una referencia a la marca h1 de la página.

Si queremos cambiar el color del texto debemos acceder a la propiedad style y de ésta a la propiedad color:



tit.style.color='#ff0000';

Es similar para cambiar la fuente del título (accedemos a la propiedad fontSize):

var tit=document.getElementById('titulo');
tit.style.fontSize=60;












Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría DHTML

  • Medallas
  • 0
    Favoritos
  • 9566
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados