En este artículo, aprenderemos cómo se puede aplicar un estilo en un elemento usando jQuery. Suponga que está creando un sitio web o un juego donde necesita que la interfaz de usuario sea interactiva. En tales casos, los estilos pueden desempeñar un papel muy importante. En esta publicación, aprenderemos cómo podemos cambiar los estilos cuando se activan ciertos eventos con la ayuda de JQuery. Podemos aplicar estilos en los elementos utilizando las clases CSS de JQuery o el método .css() de JQuery .
Enfoque 1: uso de clases CSS de JQuery. Este enfoque consiste en utilizar métodos como el método addClass() , el método removeClass() y el método toggleClass() . Estos métodos funcionan de manera similar al método classList.addClass() y al método classList.removeClass(). Podemos crear algunas clases con algunas reglas css y agregarlas o eliminarlas usando JQuery según el requisito.
Sintaxis:
$("#poll").removeClass("safe").addClass("danger");
// OR
$("#poll").toggleClass("danger");
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<style>
#poll {
position: absolute;
bottom: 15%;
}
#submit {
position: absolute;
bottom: 10%;
}
.safe {
background-color: rgb(6, 161, 6);
width: 20%;
height: 30%;
}
.danger {
background-color: rgb(226, 19, 19);
width: 20%;
height: 60%;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>How can you apply a style on an
element using jQuery?</h3>
<div id="poll" class="safe"></div>
<button id="submit">Alarm</button>
<script>
$("#submit").click(function () {
// We can either remove the old
// class and add a new one
// $("#poll").removeClass("safe").addClass("danger");
// Otherwise, we can toggle the class
$("#poll").toggleClass("danger");
})
</script>
</body>
</html>
Producción:
En el ejemplo anterior, mantenemos dos clases diferentes seguras y peligrosas para diferentes estados. Inicialmente, la clase segura se adjunta a div con id #poll y al hacer clic en el botón, esta clase segura se elimina y la clase de peligro se agrega dinámicamente, lo que aumentó la altura de div y cambió su color de fondo a rojo.
Si está confundido acerca de qué clase quitar y qué clase agregar, entonces el método toggleClass(“className”) está ahí para usted. Este método agrega clase (que se pasa como un argumento dentro del método) a la etiqueta HTML si no se agregó actualmente o elimina la clase del elemento si se agregó actualmente a la etiqueta HTML. En palabras simples, este método alterna entre agregar/eliminar clases de los elementos seleccionados.
Enfoque 2: usar el método JQuery css(): en este método, en lugar de crear clases separadas dentro de la hoja de estilo, puede establecer estilos directamente desde JavaScript. El método css() se puede usar para devolver una sola propiedad basada en la propiedad dada o establecer una o varias propiedades CSS.
Sintaxis:
// Assigning a single CSS property
$("#phone").css("background", "red");
// Assigning multiple properties
$("#phone").css({"background": "red", "font-size": "16px"});
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>How can you apply a style on an
element using jQuery?</h3>
<b>Telephone Number Verification</b>
<br><br>
<input type="number" id="phone"
placeholder="Enter the Phone No." />
<span id="warning"></span><br><br>
<button id="submit">Check</button>
<script>
$("#submit").click(function () {
// Regular expression to check
// for an indian phone number
const regexExp = /^[6-9]\d{9}$/gi;
const phone = $("#phone").val();
// Add or remove classes based on
// the regular expression check
if (!regexExp.test(phone)) {
$("#warning").text("It's wrong try again!");
$("#warning").css("color", "red");
$("#phone").css("background", "red");
} else {
$("#warning").text("It's correct");
$("#warning").css("color", "green");
$("#phone").css("background", "green");
}
});
</script>
</body>
</html>
Salida: hemos verificado si el número de teléfono indio ingresado es correcto o no, para lo cual verificamos el valor de entrada con un patrón de expresión regular personalizado, si es falso, luego, usando el método JQuery CSS, cambiamos el color de fondo del Textarea de entrada y mostramos una advertencia.
Publicación traducida automáticamente
Artículo escrito por himanshusharma11199 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA