En este artículo, aprenderemos cómo aumentar el tamaño de una división al hacer clic en ella con jQuery.
Enfoque 1: Usar el método height() y width().
Todas las divisiones en la página se seleccionan primero usando un selector común y se aplica un enlace de clic para activar la función para aumentar el tamaño usando el método click() . La división en la que se hace clic actualmente se puede encontrar usando esto como selector.
La altura actual del elemento se puede encontrar usando el método height() y el ancho actual se puede encontrar usando el método width() . Estos se almacenan temporalmente en variables separadas. Luego se utilizan los mismos métodos para establecer la altura y el ancho modificados. Los nuevos valores se pueden calcular multiplicando la altura y el ancho actuales con un multiplicador. Este multiplicador se puede especificar como una variable. Esto aumentará el tamaño de la división en la que se hizo clic por igual.
También podemos usar diferentes multiplicadores para aumentar la altura y el ancho de las divisiones por separado.
Sintaxis:
$(".box").click(function () {
// Select the clicked element
let curr_elem = $(this);
// Get the current dimensions
let curr_width = curr_elem.width();
let curr_height = curr_elem.height();
// Set the new dimensions
curr_elem.height(curr_height * increase_modifier);
curr_elem.width(curr_width * increase_modifier);
});
Los siguientes ejemplos ilustran el enfoque anterior:
Ejemplo:
HTML
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<style>
.container {
display: flex;
}
.box {
height: 100px;
width: 100px;
margin: 10px;
}
.red-bg {
background-color: red;
}
.green-bg {
background-color: green;
}
.yellow-bg {
background-color: yellow;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to increase the size of a
division when you click it using jQuery?
</b>
<p>Click on a div to increase its size</p>
<div class="container">
<div class="box red-bg"></div>
<div class="box green-bg"></div>
<div class="box yellow-bg"></div>
</div>
<script>
$(".box").click(function () {
// Select the element that
// is clicked on
let curr_elem = $(this);
// Set the amount to increase
let increase_modifier = 1.5;
// Get the current width of the element
let curr_width = curr_elem.width();
// Get the current height of the element
let curr_height = curr_elem.height();
// Use the same methods to set
// the new dimensions
curr_elem.height(
curr_height * increase_modifier
);
curr_elem.width(
curr_width * increase_modifier
);
});
</script>
</body>
</html>
Producción:
Enfoque 2: Usar el método css() .
Esto es similar al enfoque anterior. Todas las divisiones en la página se seleccionan primero usando un selector común y se aplica un enlace de clic para activar la función para aumentar el tamaño usando el método click() . La división en la que se hace clic actualmente se puede encontrar usando esto como selector.
La altura y el ancho actuales del elemento se pueden encontrar usando el método css() y pasando el primer parámetro como «alto» y «ancho «. Esto devolverá la altura y el ancho actuales de la división. Estos se almacenan temporalmente en variables separadas después de analizarlos en un número entero usando el método parseInt() . El método css() se usa nuevamente para asignar la nueva altura y anchura sin pasar por alto el nuevo valor como segundo parámetro. Los nuevos valores se pueden calcular multiplicando la altura y el ancho actuales con un multiplicador, similar al método anterior.
Sintaxis:
$(".box").click(function () {
// Select the clicked element
let curr_elem = $(this);
// Get the current dimensions
let curr_width = parseInt(curr_elem.css("width"), 10);
let curr_height = parseInt(curr_elem.css("height"), 10);
// Set the CSS value of the element
curr_elem.css({
// Set the new height and width
width: curr_width * increase_modifier,
height: curr_height * increase_modifier,
});
});
Ejemplo:
HTML
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<style>
.container {
display: flex;
}
.box {
height: 100px;
width: 100px;
margin: 10px;
}
.blue-bg {
background-color: blue;
}
.green-bg {
background-color: green;
}
.orange-bg {
background-color: orange;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to increase the size of a
division when you click it using jQuery?
</b>
<p>Click on a div to increase its size</p>
<div class="container">
<div class="box blue-bg"></div>
<div class="box green-bg"></div>
<div class="box orange-bg"></div>
</div>
<script>
$(".box").click(function () {
// Select the element that
// is clicked on
let curr_elem = $(this);
// Set the amount to increase
let increase_modifier = 1.5;
// Get the current width of the element
// and parse the value to integer
let curr_width =
parseInt(curr_elem.css("width"), 10);
// Get the current height of the element
// and parse the value to integer
let curr_height =
parseInt(curr_elem.css("height"), 10);
// Set the CSS value of the element
curr_elem.css({
// Set the new height and width
// after multiplying
width: curr_width * increase_modifier,
height: curr_height * increase_modifier,
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA