En este artículo, aprenderemos cómo podemos cambiar el estilo/clase de un elemento. Si desea crear un sitio web o una aplicación genial, la interfaz de usuario juega un papel importante. Podemos cambiar, agregar o eliminar cualquier propiedad CSS de un elemento HTML cuando ocurra cualquier evento con la ayuda de JavaScript. Hay dos enfoques que nos permiten lograr esta tarea.
Enfoque 1: Cambiar CSS con la ayuda de la propiedad de estilo:
Sintaxis:
document.getElementById("id").style.property = new_style
Ejemplo: En este ejemplo, hemos construido un validador de números PAN. Primero, tomaremos el valor de entrada y lo combinaremos con un patrón de expresión regular. Si coincide, use JavaScript para agregar un estilo en línea en la etiqueta <p>. De lo contrario, agregue un estilo diferente en la etiqueta <p>.
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
How can the style/class of
an element be changed?
</h2>
<b>Validate Pan Number</b>
<input type="text" id="pan" />
<p></p>
<button id="submit">Validate</button>
<script>
const btn = document.getElementById("submit");
btn.addEventListener("click", function () {
const pan = document.getElementById("pan").value;
const para = document.querySelector("p");
let regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;
if (regex.test(pan.toUpperCase())) {
para.innerHTML = "Hurrey It's correct";
// Inline style
para.style.color = "green";
} else {
para.innerHTML = "OOps It's wrong!";
// Inline style
para.style.color = "red";
}
});
</script>
</body>
</html>
Producción:
Enfoque 2: cambiar la clase en sí: podemos usar dos propiedades que se pueden usar para manipular las clases.
1. La propiedad classList: classList es una propiedad de solo lectura que devuelve los nombres de clase CSS de un elemento como un objeto DOMTokenList .
Sintaxis:
document.getElementById("id").classList
Puede usar los métodos mencionados a continuación para agregar clases, eliminar clases y alternar entre diferentes clases respectivamente.
- El método add(): Agrega una o más clases.
- El método remove(): Elimina una o más clases.
- El método toggle(): si la clase no existe, la agrega y devuelve verdadero. Elimina la clase y devuelve falso. El segundo argumento booleano obliga a agregar o eliminar la clase.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hide {
display: none;
}
.blueColor {
color: blue;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
How can the style/class of
an element be changed?
</h2>
<h3>Hide and Show the Para</h3>
<p>
GeeksforGeeks is a computer science portal
for geeks. This platform has been designed
for every geek wishing to expand their
knowledge, share their knowledge, and is
ready to grab their dream job. GFG have
millions of articles, live as well
as online courses, thousands of tutorials
and much more just for the geek inside you.
</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="color">Change Color</button>
<script>
const btn_hide = document.getElementById("hide");
const btn_show = document.getElementById("show");
const btn_color = document.getElementById("color");
const para = document.querySelector("p");
btn_hide.addEventListener("click", function () {
para.classList.add("hide");
});
btn_show.addEventListener("click", function () {
para.classList.remove("hide");
});
btn_color.addEventListener("click", function () {
para.classList.toggle("blueColor");
});
</script>
</body>
</html>
Producción:
En el ejemplo anterior, definimos dos clases de manipulación «hide» y «toggleColor» que ocultan un elemento y cambian de color a azul respectivamente. Cuando se hace clic en el botón Ocultar, la clase oculta se agrega a la etiqueta «p» que la oculta. Cuando se hace clic en el botón Mostrar, se elimina la clase oculta actual de la etiqueta «p». Cuando se hace clic en el botón Cambiar color una vez, agrega la clase «toggleColor» a la etiqueta p (que hace que el texto sea de color azul) y cuando se vuelve a hacer clic, se elimina la clase toggleColor.
2. La propiedad className: esta propiedad se utiliza para establecer la clase actual del elemento en la clase especificada.
Sintaxis:
document.getElementById("id").className = class
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.colorBlue {
color: blue;
}
.colorRed {
color: red;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
How can the style/class of
an element be changed?
</h2>
<h3>className Example</h3>
<p class="colorBlue">
GeeksforGeeks is a computer science portal
for geeks.This platform has been designed
for every geek wishing to expand their
knowledge, share their knowledge and is
ready to grab their dream job. GFG have
millions of articles, live as well
as online courses, thousands of tutorials
and much more just for the geek inside you.
</p>
<button id="submit">Change Color</button>
<script>
const btn = document.getElementById("submit");
const para = document.querySelector("p");
btn.addEventListener("click", function () {
para.className = "colorRed";
});
</script>
</body>
</html>
Producción:
In the above example, the existing ColorBlue class is set to the colorRed class using the className property which changes font color from blue to red.
Publicación traducida automáticamente
Artículo escrito por himanshusharma11199 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA