Ejemplos de propiedades de document

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.

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.