Mostrando Codigo - Javascript
Redimensionar contenidos - getElementById
Mostramos como redimensionar una tabla y una capa o div con el uso de getElementById en javascript
EXPLICACION
El ejemplo hace uso de getElementById(...).style.width el cual permite modificar el ancho, aunque puede utilizarse este otro para modificar el alto.
function redimensionaAlto (Contenido,Alto){
document.getElementById(''+Contenido+'').style.height =""+Alto+"px";
}
CODIGO
# Codigo ofrecido por Tutores.org
<html>
<head>
<script language="javascript">
function redimensionaAncho (Contenido,Ancho){
document.getElementById(''+Contenido+'').style.width =""+Ancho+"px";
}
</script>
</head>
<body>
<table id="tabla" height="200" width="200" border="1" cellpadding="0" cellspacing="0">
<tr><td>Tabla y contenido</td></tr>
</table>
<input type="button" name="boton" value="redimensiona tabla a 500" onClick="redimensionaAncho('tabla',500);"/>
<input type="button" name="boton" value="redimensiona tabla a 50" onClick="redimensionaAncho('tabla',50);"/>
<hr /><br />
<div id="capa" style="border:1px solid #000000">Capa y contenido</div>
<input type="button" name="boton" value="redimensiona tabla a 500" onClick="redimensionaAncho('capa',500);"/>
<input type="button" name="boton" value="redimensiona tabla a 50" onClick="redimensionaAncho('capa',50);"/>
</body>
</html>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Redimensionar contenidos - getElementById" href="http://www.tutores.org/codigo/1868/" target="_blank"> Redimensionar contenidos - getElementById</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Redimensionar contenidos - getElementById" href="http://www.tutores.org/codigo/1868/" target="_blank"> Redimensionar contenidos - getElementById</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS