Establecer la altura de un elemento div usando jQuery
La altura del contenido de un div se puede establecer o cambiar de forma dinámica mediante los métodos height(), innerHeight() y outsideHeight() según los requisitos del usuario. Si el usuario desea cambiar la altura del contenido de un div dinámicamente, incluye cambiar la altura real, la altura real con relleno y la altura real con relleno y borde, entonces el usuario puede usar cualquiera de los siguientes métodos que establecerán dinámicamente la altura del contenido de un elemento.
- Usando el método de altura()
- Usando el método innerHeight()
- Usando el método de altura exterior()
Ejemplo 1: la altura del contenido de div usando el método height() cambiará la altura del contenido de un elemento excluyendo el relleno, el borde y el margen del elemento.
HTML
<!DOCTYPE html> <html> <head> <title> How to dynamically set the height of a div element using jQuery? </title> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </script> <style> #div1 { height: 50px; width: 300px; border: 2px solid black; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>Dynamically set the height of a div element using jQuery</h3> <div id="div1" class="box"> Dynamically set content height of a div on GeeksforGeek.<br> GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </div> <br> <form> <input type="text" class="geeks1"> <button type="button" class="geeks2"> Set Height </button> </form> <p id="p1"></p> <p id="p2"></p> </center> <script> $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-height: "+ $("#div1").height(); + "px"; $("#p1").text(demo); var newHeight = $(".geeks1").val(); $(".box").height(newHeight); demo = "New-height: "+ $("#div1").height(); + "px"; $("#p2").text(demo); }); }); </script> </body> </html>
Producción:
Ejemplo 2: la altura del contenido de div usando el método innerHeight() cambiará la altura del contenido de un elemento, incluido el relleno del elemento.
HTML
<!DOCTYPE html> <html> <head> <title> How to dynamically set the height of a div element using jQuery? </title> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </script> <style> #div1 { height: 50px; width: 300px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>Dynamically set the height of a div element using jQuery</h3> <div id="div1" class="box"> Dynamically set content height of a div on GeeksforGeek.<br> GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </div> <br> <form> <input type="text" class="geeks1"> <button type="button" class="geeks2"> Set Height </button> </form> <p id="p1"></p> <p id="p2"></p> </center> <script> $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-height(+Padding) : " + $("#div1").innerHeight(); + "px"; $("#p1").text(demo); var newHeight = $(".geeks1").val(); $(".box").innerHeight(newHeight); demo = "New-height(+Padding) : "+ $("#div1").innerHeight(); + "px"; $("#p2").text(demo); }); }); </script> </body> </html>
Producción:
Ejemplo 3: la altura del contenido de div usando el método outerHeight() cambiará la altura del contenido de un elemento, incluido el relleno y el borde del elemento.
HTML
<!DOCTYPE html> <html> <head> <title> How to dynamically set the height of a div element using jQuery? </title> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </script> <style> #div1 { height: 50px; width: 300px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>Dynamically set the height of a div element using jQuery</h3> <div id="div1" class="box"> Dynamically set content height of a div on GeeksforGeek.<br> GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </div> <br> <form> <input type="text" class="geeks1"> <button type="button" class="geeks2"> Set Height </button> </form> <p id="p1"></p> <p id="p2"></p> </center> <script> $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-height(border+Padding) : " + $("#div1").outerHeight(); + "px"; $("#p1").text(demo); var newHeight = $(".geeks1").val(); $(".box").outerHeight(newHeight); demo = "New-height(border+Padding) : " + $("#div1").outerHeight(); + "px"; $("#p2").text(demo); }); }); </script> </body> </html>
Producción:
Establecer el ancho de un elemento div usando jQuery
El ancho del contenido de un div puede establecerse o cambiarse dinámicamente usando los métodos width(), innerWidth() y outsideWidth() según los requisitos del usuario. Si el usuario desea cambiar dinámicamente el ancho del contenido de un div, incluye cambiar el ancho real, el ancho real con relleno y el ancho real con relleno y borde, entonces el usuario puede usar cualquiera de los siguientes métodos que establecerán dinámicamente el ancho del contenido de un elemento.
- Usando el método ancho()
- Usando el método innerWidth()
- Usando el método outsideWidth()
Ejemplo 1: el ancho del contenido de div usando el método width() cambiará el ancho del contenido de un elemento excluyendo el relleno, el borde y el margen del elemento.
HTML
<!DOCTYPE html> <html> <head> <title> How to dynamically set the width of a div element using jQuery? </title> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </script> <style> #div1 { height: 100px; width: 200px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>Dynamically set the width of a div element using jQuery</h3> <div id="div1" class="box"> Dynamically set content width of a div on GeeksforGeek.<br> GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </div> <br> <form> <input type="text" class="geeks1"> <button type="button" class="geeks2"> Set Width </button> </form> <p id="p1"></p> <p id="p2"></p> </center> <script> $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-width : "+ $("#div1").width(); + "px"; $("#p1").text(demo); var newWidth = $(".geeks1").val(); $(".box").width(newWidth); demo = "New-width : "+ $("#div1").width(); + "px"; $("#p2").text(demo); }); }); </script> </body> </html>
Producción:
Ejemplo 2: el ancho del contenido de div usando el método innerWidth() cambiará el ancho del contenido de un elemento, incluido el relleno del elemento.
HTML
<!DOCTYPE html> <html> <head> <title> How to dynamically set the width of a div element using jQuery? </title> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </script> <style> #div1 { height: 100px; width: 200px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>Dynamically set the width of a div element using jQuery</h3> <div id="div1" class="box"> Dynamically set content width of a div on GeeksforGeek.<br> GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </div> <br> <form> <input type="text" class="geeks1"> <button type="button" class="geeks2"> Set Width </button> </form> <p id="p1"></p> <p id="p2"></p> </center> <script> $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-width(+Padding) : "+ $("#div1").innerWidth(); + "px"; $("#p1").text(demo); var newWidth = $(".geeks1").val(); $(".box").innerWidth(newWidth); demo = "New-width(+Padding) : "+ $("#div1").innerWidth(); + "px"; $("#p2").text(demo); }); }); </script> </body> </html>
Producción:
Ejemplo 3: el ancho del contenido de div usando el método outsideWidth() cambiará el ancho del contenido de un elemento, incluido el relleno y el borde del elemento.
HTML
<!DOCTYPE html> <html> <head> <title> How to dynamically set the width of a div element using jQuery? </title> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </script> <style> #div1 { height: 100px; width: 200px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>Dynamically set the width of a div element using jQuery</h3> <div id="div1" class="box"> Dynamically set content width of a div on GeeksforGeek.<br> GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </div> <br> <form> <input type="text" class="geeks1"> <button type="button" class="geeks2"> Set Width </button> </form> <p id="p1"></p> <p id="p2"></p> </center> <script> $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-width(border+Padding) : "+ $("#div1").outerWidth(); + "px"; $("#p1").text(demo); var newWidth = $(".geeks1").val(); $(".box").outerWidth(newWidth); demo = "New-width(border+Padding) : "+ $("#div1").outerWidth(); + "px"; $("#p2").text(demo); }); }); </script> </body> </html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA