Agrandar caja con un click

fherdoiza · #1 (**permalink**) 09/02/2011, 13:03

Hola
Necesito saber como puedo agrandar una caja dandole un click
Mediante javascript
aquí está mi codigo:
Html:
<html>
<head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Movimiento Recta</title>
<script type="text/javascript" src="js/cajagrande.js">
</script>
</head>
<body id="body">


</body>
</html>

JavaScript:

window.onload=function(){
var x = 20;
var box=document.createElement("div");
box.style.top="50px";
box.style.left="50px";
box.style.width = x+"px";
box.style.height = x+"px";
box.style.backgroundColor = "blue";
box.style.position = "absolute";
document.getElementById("body").appendChild(box);

}

Gracias...

_cronos2 · #2 (**permalink**) 09/02/2011, 13:06

Con una caja, ¿te refieres a un div o a un input?

spicke23 · #3 (**permalink**) 09/02/2011, 14:14

Cita:

Iniciado por fherdoiza

Hola
Necesito saber como puedo agrandar una caja dandole un click
Mediante javascript
aquí está mi codigo:
Html:
<html>
<head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Movimiento Recta</title>
<script type="text/javascript" src="js/cajagrande.js">
</script>
</head>
<body id="body">


</body>
</html>

JavaScript:

window.onload=function(){
var x = 20;
var box=document.createElement("div");
box.style.top="50px";
box.style.left="50px";
box.style.width = x+"px";
box.style.height = x+"px";
box.style.backgroundColor = "blue";
box.style.position = "absolute";
document.getElementById("body").appendChild(box);

}

Gracias...

Que es lo que quieres realmente,por que con eso no entiendo lo que buscas

walterdevel · #4 (**permalink**) 09/02/2011, 15:09

Te paso tu función modificada:

Código Javascript:

Ver originalwindow.onload=function(){
var x = 20;
var box=document.createElement("div");
box.style.top="50px";
box.style.left="50px";
box.style.width = x+"px";
box.style.height = x+"px";
box.style.backgroundColor = "blue";
box.style.position = "absolute";
box.addEventListener("click", function(evt){
    this.style.width = '200px';
    this.style.height = '200px';
}, false);
document.body.appendChild(box);
}