Siguiendo en la línea de manipulación del estilo CSS con JavaScript he hecho un sencillo script que os explico a continuación.
Creo un elemento con un alto y un ancho de 50px, cuyo fondo es de color rojo. Con el script lo que consigo es que se vaya agrandando hasta conseguir un ancho y un alto de 500px. Cuando llega a ese tamaño su fondo cambia a color azul y vuelve a su posición original haciendose pequeño. No para en ningún momento.
Podéis ver el script en marcha en:
Aquí os dejo el código:
Un saludo.
Creo un elemento con un alto y un ancho de 50px, cuyo fondo es de color rojo. Con el script lo que consigo es que se vaya agrandando hasta conseguir un ancho y un alto de 500px. Cuando llega a ese tamaño su fondo cambia a color azul y vuelve a su posición original haciendose pequeño. No para en ningún momento.
Podéis ver el script en marcha en:
Aquí os dejo el código:
<html>
<head>
<title>Agrandar Div</title>
<script type="text/javascript">
var ancho = 50;
var alto = 50;
function darEstilo(){
document.getElementById('divUno').style.width = "50px";
document.getElementById('divUno').style.height = "50px";
document.getElementById('divUno').style.backgroundColor = "red";
agrandarDiv();
}
function agrandarDiv(){
ancho = ancho + 1;
alto = alto + 1;
elAncho = ancho.toString()+"px";
elAlto = alto.toString()+"px";
document.getElementById('divUno').style.width = elAncho;
document.getElementById('divUno').style.height = elAlto;
if(ancho < 500){
setTimeout(agrandarDiv,1);
}
else{
document.getElementById('divUno').style.backgroundColor = "blue";
hacerPequeno();
}
}
function hacerPequeno(){
ancho = ancho - 1;
alto = alto - 1;
elAncho = ancho.toString()+"px";
elAlto = alto.toString()+"px";
document.getElementById('divUno').style.width = elAncho;
document.getElementById('divUno').style.height = elAlto;
if(ancho > 50){
setTimeout(hacerPequeno,1);
}
else{
document.getElementById('divUno').style.backgroundColor = "red";
agrandarDiv();
}
}
</script>
</head>
<body onLoad="darEstilo()">
</body>
</html>
Un saludo.
No hay comentarios:
Publicar un comentario