Javascript - Redimensionar contenidos - getElementById
Códigos Javascript
Mostramos como redimensionar una tabla y una capa o div con el uso de getElementById en javascript
Tutores.org
Mostrando Codigo - 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