Depois de estudar as propriedades do objeto document, veremos algum exemplo para ilustrar o modo de acesso e utilização das mesmas.

Exemplo com a propriedade bgColor

Vamos utilizar o evento onclick para colocar três botões na página que ao clicá-los mudará a cor de fundo da página:

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

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

Primeiro, definimos uma função que será a encarregada de mudar a cor e logo três botões que chamarão a função quando forem clicados passando a cor como parâmetro.

Propriedade title

A propriedade title salva a cadeia que conforma o título de nossa página web. Se acessarmos a tal propriedade obteremos o título e se a mudamos, mudará o título da página web.

Nota: Lembramos que o título pode ser visto na barra que está acima de tudo da janela do navegador.

Vamos mostrar o título da página em uma caixa de alerta:

alert (document.title)

Agora vamos fazer uma função que modifica o título da página, atribuindo-lhe o texto que chegue por parâmetro:

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

Como no exemplo anterior, vamos criar vários botões que chamem a função passando-lhe distintos textos, que se colocarão no título da página:

<form>
<input type="Button" value="Titulo = Olá a todos" onclick="mudaTitulo('Olá a todos')">
<input type="Button" value="Titulo = Bem-vindos a minha página web" onclick="mudaTitulo('Bem-vindos a minha página web')">
<input type="Button" value="Titulo = Mais dias que trabalhamos" onclick="mudaTitulo('Mais dias que trabalhamos')">
</form>