Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

nknk

aumentar/diminuir div

Por , em Javascript

Recommended Posts

nknk    3

nknk
Postado

Eu estou tentando aumentar ou diminuir a altura de uma div via javascript mas na hora de aumentar ela apresenta não funciona conforme previsto, somente na hora de diminuir, pq? Na hora que aumenta ele diminui 20px depois aumenta, na segunda vez, de mais de 20px

 

function aumentar(){
var el = document.getElementById("div");
var result = el.style.height;
var result = result.split("px",1);
result += 20;
el.style.height = result + "px";
}
function diminuir(){
var el = document.getElementById("div");
var result = el.style.height;
var result = result.split("px",1);
result -= 20;
el.style.height = result + "px";
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

rgodoi    0

rgodoi
Postado

Opa! Tomei a liberdade e fiz uma paginazinha com suas funções:

 

CODE
<html>

<head>

<script>

 

function aumentar() {

var el = document.getElementById("div");

var result = el.style.height;

result = parseInt(result.split("px", 1));

result += 20;

el.style.height = result + "px";

}

 

function diminuir(){

var el = document.getElementById("div");

var result = el.style.height;

result = result.split("px", 1);

result -= 20;

el.style.height = result + "px";

}

 

 

</script>

 

</head>

 

<body>

<div id="div" style="border: 1px solid #ff00ff; height: 40px;">Testando Lorem ipsum dolor sit amet.</div>

<input type="button" value=" + " onclick="aumentar()"/>

<input type="button" value=" - " onclick="diminuir()"/>

</body>

 

</html>

 

Quando você faz 'result += 20;', o Javascript entende

como uma concatenação, por isso, faz-se uso do parseInt;

Ex.: Quando você fizer '20' + '20', não resultar em '2020'.

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

nknk    3

nknk
Postado

Ficou legal cara!

 

Eu pensei em fazer algo como se fosse uma janela redimensionavel com o mouse, mas ai seria mais rebuscado o código. Mas por enquanto usarei essa solução que é mais simples, valeu.

 

Eu fiz uma nova função baseada nas suas alterações

 

Você poderia colocar o quanto a div(id) seria aumentada/dimininuida (num e num2), na altura e largura

 

ex.: java script:tamanho('20','conteudo','0')

 

Neste caso so iria aumentar a altura, para aumentar a largura bastaria colocar valores diferentes de zero nos outros campos e vice,versa. Falta agora uma versão com o mouse

 

<html>
<head>
<script>

function tamanho(num, id, num2) {
if ((num!=0)){
var el = document.getElementById(id);
var result = el.style.height;
result = parseInt(result.split("px", 1));
result += parseInt(num);
el.style.height = result + "px";}
if ((num2!=0)){
var el = document.getElementById(id);
var result = el.style.height;
result = parseInt(result.split("px", 1));
result += parseInt(num2);
el.style.width = result + "px";}
}
</script>

</head>

<body>
<div id="div" style="border: 1px solid #ff00ff; width: 40px; height: 40px;">Testando Lorem ipsum dolor sit amet.</div>
<input type="button" value=" + " onclick="tamanho('20','div','20')"/>
<input type="button" value=" - " onclick="tamanho('-20','div','20')"/>
</body>

</html>

essa função tem um pequeno problema, ela funciona em alguns casos, qdo há mtas divs dentro de outros, para que ela funcione é necessário que a formatação da div esteja fora da folha de estilo definida no cabelhaço, ou seja ela funcionará nesse caso <div id="" style="">, se o estilo tiver definido em um arquivo folha.css, não funcionará em alguns casos

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito