En este artículo, veremos cómo crear dinámicamente una clase CSS y aplicarla al elemento dinámicamente usando JavaScript. Para hacer eso, primero creamos una clase y la asignamos a los elementos HTML en los que queremos aplicar la propiedad CSS. Podemos usar la propiedad className y classList en JavaScript.
Acercarse:
- La propiedad className utilizada para agregar una clase en JavaScript. Sobrescribe las clases existentes de los elementos seleccionados. Si no queremos sobrescribir, debemos agregar un espacio antes del nombre de la clase.
// It overwrites existing classes
var h2 = document.querySelector("h2");
h2.className = "test";
// Add new class to existing classes
// Note space before new class name
h2.className = " test";
- La propiedad classList también se usa para agregar una clase en JavaScript, pero nunca sobrescribe las clases existentes y agrega una nueva clase a la lista de clases de elementos seleccionados.
// Add new class to existing classes
var p = document.querySelector("p");
p.classList.add("test");
- Después de agregar nuevas clases a los elementos, seleccionamos la nueva clase (prueba) y luego le aplicamos propiedades CSS, con la ayuda de la propiedad de estilo en JavaScript.
// Select all elements with class test
var temp = document.querySelectorAll(".test");
// Apply CSS property to it
for (var i = 0; i < temp.length; i++) {
temp[i].style.color = "white";
temp[i].style.backgroundColor = "black";
}
A continuación se muestra la implementación de esto:
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h2 class="hello"> Welcome to gfg </h2>
<p id="hi">Hi it's me.</p>
<button onclick="apply()">
Apply css dynamically
</button>
<script>
function apply() {
// It overwrites existing classes
var h2 = document.querySelector("h2");
h2.className = "test";
// Add new class to existing classes
var p = document.querySelector("p");
p.classList.add("test");
// Select all elements with class test
var temp = document.querySelectorAll(".test");
// Apply CSS property to it
for (var i = 0; i < temp.length; i++) {
temp[i].style.color = "green";
temp[i].style.fontSize = "40px";
}
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA