极客教程如何使用jQuery在点击分部时增加它的大小
在这篇文章中，我们将学习如何使用jQuery在你点击分部时增加其大小。
方法1：使用height()和width()方法。
首先使用一个共同的选择器选择页面上的所有分部，然后应用一个点击绑定来触发函数，使用click()方法增加大小。然后，通过使用this作为选择器，就可以找出当前被点击的分部。
元素的当前高度可以通过height()方法查出，当前宽度可以通过width()方法查出。这些都被暂时储存在不同的变量中。然后用同样的方法来设置修改后的高度和宽度。新的值可以通过将当前高度和宽度与一个乘数相乘来计算。这个乘数可以被指定为一个变量。这将平等地增加被点击的分割的大小。
我们还可以使用不同的乘数来分别增加分部的高度和宽度。
语法:
$(".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);
});
下面的例子说明了上述方法。
示例:
<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>
输出:
方法2：使用css()方法。
这与上述方法类似。首先使用一个共同的选择器选择页面上的所有分部，然后应用一个点击绑定来触发函数，使用click()方法增加大小。然后，通过使用this作为选择器，就可以找出当前被点击的分部。
通过使用css()方法和传递第一个参数“height”和“width“，可以找出元素的当前高度和宽度。这将返回分部的当前高度和宽度。在使用parseInt()方法将其解析为整数后，这些数据被暂时存储在不同的变量中。css()方法再次被用来分配新的高度和宽度，绕过新值作为第二个参数。新值可以通过将当前高度和宽度与一个乘数相乘来计算，与上述方法类似。
语法:
$(".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,
});
});
示例:
<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>
输出:
