Estoy tratando de hacer clic en un botón para volver al tamaño original del elemento modificado con .resizable . Lo intenté:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <style> .box { border: 2px solid #008cba; margin-top: 10px; } </style> <script> $(function() { $('.box').resizable(); $('#btn').click(function() { $('.box').resizable('destroy'); }); }); </script> </head> <body> <button id='btn' type='button'> Click-me </button> <div class='box'> <h1 class='el1'> Stack Overflow resizable </h1> </div> </body> </html> Pero, $('.box').resizable('destroy'); solo hace que desaparezca el icono de cambio de tamaño. Me gustaría que el elemento volviera a su tamaño original cuando hago clic en el botón, solo usando jQuery , sin código JavaScript . ¿Es posible hacer eso?
Para hacer lo que necesita, deberá volver a establecer la height y el width del elemento redimensionado en sus valores originales.
En el ejemplo que se muestra en su pregunta, el valor predeterminado de esas propiedades sería auto , ya que no se han establecido explícitamente en CSS en ningún otro lugar.
$(function() { $('.box').resizable(); $('#btn').click(function() { $('.box').resizable('destroy').css({ width: 'auto', height: 'auto' }); }); }); .box { border: 2px solid #008cba; margin-top: 10px; } <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" /> <button id='btn' type='button'>Click-me</button> <div class='box'> <h1 class='el1'>Stack Overflow resizable</h1> </div> $(function () { $(".box").resizable(); $("#btn").click(function () { let instance = $(".box").resizable("instance"); $(".box").width(instance.originalSize.width); $(".box").height(instance.originalSize.height); $(".box").resizable("destroy"); }); }); .box { border: 2px solid #008cba; margin-top: 10px; } <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"/> <link rel="stylesheet" href="/resources/demos/style.css" /> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <body> <button id="btn" type="button">Click-me</button> <div class="box"> <h1 class="el1">Stack Overflow resizable</h1> </div> </body>