Publicado por: Paulo Fernandes | 10/set/2008

Alterando a largura de um elemento via Javascript

Bom galera.

Resolvi criar este post aqui por uma dúvida em um dos forúns que participo http://forum.imasters.com.br.

A dúvida está neste post aqui. Abaixo está a solução para o problema. Este será um dos post que não terá imagem, por se tratar de uma coisa simples, devem existir outras formas para se fazer isto, mas essa é a mais ditádica que eu consegui.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”pt-br” lang=”pt-br”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Alterando a largura de um elemento via Javascript by AprendaCSS.wordpress.com</title>
<style type=”text/css”>
#esquerda {
width: 20%;
background-color: #CCC;
height: 500px;
float:left;
}
#direita {
width: 80%;
background-color: #AFA;
height: 500px;
float: left;
}

#esq, #dir {
margin: 10px;
}
</style>
<script type=”text/javascript”>
function espande(estado){
if( estado == “normal” ) {
document.getElementById(‘esquerda’).style.width = “20%”;
document.getElementById(‘direita’).style.width = “80%”;
document.getElementById(‘dir’).href = “javascript: espande(‘diminui_esquerda’);”;
document.getElementById(‘dir’).innerHTML = “Expandir para Direita”;
document.getElementById(‘esq’).href = “javascript: espande(‘diminui_direita’);”;
document.getElementById(‘esq’).innerHTML = “Expandir para Esquerda”;
} else if ( estado == “diminui_esquerda” ) {
document.getElementById(‘esquerda’).style.width = “10%”;
document.getElementById(‘direita’).style.width = “90%”;
document.getElementById(‘dir’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘dir’).innerHTML = “Voltar ao Normal”;
document.getElementById(‘esq’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘esq’).innerHTML = “Voltar ao Normal”;
} else if ( estado == “diminui_direita” ) {
document.getElementById(‘esquerda’).style.width = “90%”;
document.getElementById(‘direita’).style.width = “10%”;
document.getElementById(‘dir’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘dir’).innerHTML = “Voltar ao Normal”;
document.getElementById(‘esq’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘esq’).innerHTML = “Voltar ao Normal”;
}
}

</script>
</head>
<body>

<div id=”esquerda”>
<p>
<a id=”esq” href=”javascript: espande(‘diminui_direita’);”> Expandir para Esquerda </a>
</p>
</div>

<div id=”direita”>
<p>
<a id=”dir” href=”javascript: espande(‘diminui_esquerda’);”> Expandir para Direita </a>
</p>
</div>

</body>
</html>

Abaixo tem uma explicação de um bloco de código, os outros são iguais, apenas mudando os parametros.

document.getElementById(‘esquerda’).style.width = “20%”;
document.getElementById(‘direita’).style.width = “80%”;
document.getElementById(‘dir’).href = “javascript: espande(‘diminui_esquerda’);”;
document.getElementById(‘dir’).innerHTML = “Expandir para Direita”;
document.getElementById(‘esq’).href = “javascript: espande(‘diminui_direita’);”;
document.getElementById(‘esq’).innerHTML = “Expandir para Esquerda”;

document.getElementById(‘esquerda’) significa que estou percorrendo toda a página procurando por um elemento que tenha o id igual a esquerda.

Linha 1: Atribuo 20% do tamanho da tela para o elemento que tem o id igual a esquerda.

Linha 2: Atribuo 80% do tamanho da tela para o elemento que tem o id igual a direita

Linha 3: Altero o atributo href do elemento que tem o id igual a dir.

Linha 4: Substituo o conteúdo do elemento que tem o id igual a dir.

Linha 5: Altero o atributo href do elemento que tem o id igual a esq.

Linha 6: Substituo o conteúdo do elemento que tem o id igual a esq.

Bom é isso ai pessoal, caso alguém tenha dúvida, poste que responderei com o maior prazer.

Até o próximo.

Anúncios

Responses

  1. Fala ai cara, so uma dica, voce deveria tirar esses getElementById e usar um funçao que o retorne o metodo deixando seu codigo muito mais limpo, e tambem agrupar os elemento que sejam do mesmo ID

    Qualquer coisa manda um email ai.

  2. Com certeza Hantaro

    Só não fiz isso para ficar mais didatico, mas o correto mesmo seria fazer isso

    function nome_que_deseja(id) {
    return document.getElementById(id);
    }


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: