En este artículo, aprenderemos cómo aumentar el ancho de una división en píxeles específicos una vez que se hace clic en ella con jQuery.
Podemos hacer esta tarea usando el método width() que se usa para devolver y establecer el ancho de un elemento en JQuery. Entonces, cuando hacemos clic en él, se llama a una función en la que primero almacenamos el ancho actual del div en una variable usando el método de ancho() y luego aumentamos los píxeles especificados y establecemos su ancho usando el método de ancho (valor) en JQuery.
Sintaxis:
// To return the width of the selected element $(selector).width() // To set the width of the selected element $(selector).width(value)
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<style>
body {
color: green;
font-size: 30px;
}
div {
font-size: 40px;
background-color: rgb(190, 190, 190);
width: 300px;
border: solid 4px red;
}
button {
font-size: 30px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div onclick="fun()">
Click to Div to increase the width
</div>
</center>
<script>
// Width of the div before clicking button
var w = $("div").width();
// Increment that we want to do
var inc = 200;
function fun() {
// Increase width by 200 and set
$("div").width(w + inc);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sachinchhipa44 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA