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