Blog

Cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery

No hay comentarios
Java Script

Con Java Script y jQuery se puede realizar practicamente cualquier tipo de funcionalidad a nivel cliente (frontend) manipulando todo el conteniedo HTML y CSS. Teniendo en cuenta eso en esta oportunidad vamos a ver cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery, modificando sus atributos CSS height y width.

Si bien esta funcionalidad la vamos a realizar con una etiqueta div, también puede ser realizada con cualquier otro tag, como por ejemplo para una imagen, un input o un botón entre otros.

Código para cambiar el tamaño de una etiqueta o tag div con jQuery y Java Script

Para poder realizar dicha funcionalidad vamos a definir una etiqueta div con la clase box, con un tamaño de 300 píxeles de alto y de ancho, además le pondremos color de fondo rojo para que se pueda visualizar mejor el cambio de tamaño.

<html>
  <head>
    <title>Cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
    <script>
      $(function(){
        function changeSize(){
          $('.box').css('height', '100px');
          $('.box').css('width', '100px');
        }
        setTimeout(function(){
          changeSize();
        }, 2000);
      });
    </script>
  </body>
</html>

Al ejecutar el código anterior se va a visualizar el cuadrado rojo en la pantalla y luego de 2 segundos va a cambiar su tamaño (se achicará a 100 píxeles de alto y ancho).

Lo más importante del código es la función css de jQuery, ya que con esa misma vamos a poder cambiar el height y el width. Luego para que se pueda visualizar mejor utilizamos un timeout de 2 segundo, esto va a hacer notar más el cambio de tamaño de la caja.

En caso de querer hacerlo sin jQuery (con Java Script nativo sin librerías), el código quedaría de la siguiente forma:

function changeSize(){
  box = document.getElementsByClassName('box')[0];
  box.style.width = '100px';
  box.style.height = '100px';
}
setTimeout(function(){
  changeSize();
}, 2000);

Eso es lo que hay que tener el cuenta para poder modificar los tamaños de etiquetas HTML con Java Script y con la librería jQuery. Ante cualquier problema no duden en dejar su comentario.

Deja una respuesta