Cambiar el tamaño de un div con onclick
tidave
Mensajes publicados
32
Estado
Miembro
-
animostab Mensajes publicados 3003 Fecha de registro Estado Miembro Última intervención -
animostab Mensajes publicados 3003 Fecha de registro Estado Miembro Última intervención -
Hola a todos
de hecho, todo está en el título,
me gustaría que al hacer clic en uno, pudiera cambiar el tamaño de un div
Por ejemplo
tengo el div "ejemplo" que mide 300px de altura, me gustaría que al hacer clic en el enlace, "cambiar tamaño", la altura del div pase a 500px
Gracias por ayudarme
Hasta pronto
de hecho, todo está en el título,
me gustaría que al hacer clic en uno, pudiera cambiar el tamaño de un div
Por ejemplo
tengo el div "ejemplo" que mide 300px de altura, me gustaría que al hacer clic en el enlace, "cambiar tamaño", la altura del div pase a 500px
Gracias por ayudarme
Hasta pronto
4 respuestas
-
Hola,
Se debe utilizar JavaScript para cambiar el tamaño de tu div.
1- Identifica tu componente DIV con un identificador de la siguiente manera:<div id="target"> Contenido target </div>
2- Define una función JavaScript 'changeSize' encargada de cambiar el tamaño de un elemento de tu página. Esta función tomará como parámetro el identificador del elemento a modificar, así como el tamaño deseado:<script language="javascript"> function changeSize (_divId_, _newSize_){ if ( document.getElementById(_divId_) != null ){ document.getElementById(_divId_).style.width = _newSize; } } </script>
3- En un evento de otro DIV, llama a la función 'changeSize' en el otro DIV dándole como parámetro el identificador del otro DIV, así como el tamaño:<div id="source" onclick="javascript:changeSize('target',500);"> ¡Haz clic aquí para cambiar el tamaño! </div>
Ejemplo no probado, únicamente para explicar cómo hacerlo. A ti de jugar.
--
~ No olvides la etiqueta "Resuelto" cuando tu problema esté... resuelto :) ~ -
Hola, el código propuesto por kij82 tiene varios errores, faltan los guiones bajos en newSize y width y height son cadenas y no enteros; en fin, hay que pensar en añadir el + "px"
Así que aquí está una corrección:
<script language="javascript">
function changeSize (_divId_, _newSize_){
if ( document.getElementById(_divId_) != null ){
document.getElementById(_divId_).style.width = _newSize_ +"px";
}
}
</script>
y una evolución:
<script language="javascript">
function changeSize (divId, newSizex,newSizey){
if ( document.getElementById(divId) != null ){
document.getElementById(divId).style.width = newSizex +"px";
document.getElementById(divId).style.height= newSizey +"px";
}
}
</script> -
en jquery sería más simple
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Documento sin nombre</title>
<style>
#change {
width:100%;
height:300px;
background-color:#FFFF99;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<script>
$(document).ready (function(){
$("#achanger").toggle(function(){
$("#change").css("height", "500px");
},function(){
$("#change").css("height", "300px");
});
})
</script>
<div id="change"></div>
<button id="achanger">click aquí</button>
</body>
</html>
--
¡Una pequeña gracias vale más que una gran ignorancia!
Así que si su tema está resuelto una respuesta con gracias no es de rechazo. -
Hola
Gracias por tu respuesta rápida, pero no funciona
sin embargo, el código parece estar bien
raro de todos modos
Estoy usando esto:
<script language="javascript" type="text/javascript"> function petit(ob) { document.getElementById(ob).style.width="10"+'px'; } function grand(ob) { document.getElementById(ob).style.width="200"+'px'; } </script>
con un div "ejemplo"
llamo
<a onclick="grand('ejemplo');">agrandar</a>
o
<a onclick="petit('ejemplo');">encoger</a>
funciona perfecto
Lo que quiero hacer es usar un solo vínculo
cuando haga clic en él, se agrande si estaba pequeño y se encoja si estaba grande
Gracias por ayudarme
