Ejemplos de propiedades de document

  • Por
Vemos varios ejemplos de acceso y manipulación de las propiedades del objeto document de Javascript.

Después de estudiar las propiedades del objeto document, vamos a ver algún ejemplo para ilustrar el modo de acceso y utilización de las mismas.

Ejemplo con la propiedad bgColor

Vamos a utilizar el evento onclick para colocar tres botones en la página que al pulsarlos nos cambie el color del fondo de la página.

<script> 
function cambiaColor(colorin){ 
   	document.bgColor = colorin 
}

</script> 
<form> 
<input type="Button" value="Rojo" onclick="cambiaColor('ff0000')"> 
<input type="Button" value="Verde" onclick="cambiaColor('00ff00')"> 
<input type="Button" value="Azul" onclick="cambiaColor('0000ff')"> 
</form>

Primero definimos una función que será la encargada de cambiar el color y luego tres botones que llamarán a la función cuando sean pulsados pasándole el color como parámetro.

Podemos ver el ejemplo en marcha.

Propiedad title

La propiedad title guarda la cadena que conforma el título de nuestra página web. Si accedemos a dicha propiedad obtendremos el título y si la cambiamos, cambiará el título de la página web.

Nota: recordamos que el título se puede ver en la barra de arriba del todo de la ventana del navegador.

Vamos a mostrar e título de la página en una caja de alerta.

alert (document.title)

Ahora vamos a hacer una función que modifica el título de la página , asignándole el texto que le llegue por parámetro.

function cambiaTitulo(texto){ 
   	document.title = texto 
}

Como en el ejemplo anterior, vamos a crear varios botones que llamen a la función pasándole distintos textos, que se colocarán en el título de la página.

<form> 
<input type="Button" value="Titulo = Hola a todos" onclick="cambiaTitulo('Hola a todos')"> 
<input type="Button" value="Titulo = Bienvenidos a mi página web" onclick="cambiaTitulo('Bienvenidos a mi página web')"> 
<input type="Button" value="Titulo = Más dias que longanizas" onclick="cambiaTitulo('Más dias que longanizas')"> 
</form>

Podemos ver en funcionamiento este script en otra página web.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir