Cómo agregar un nombre de clase a un elemento de JavaScript?

JavaScript | Añadiendo el nombre class a un elemento : Aquí, vamos a aprender cómo agregar un nombre class a un elemento de JavaScript?

Adición de nombres class utilizando JavaScript se puede utilizar a menudo para dar ciertas funcionalidades para su aplicación web. En este artículo, vamos a aprender cómo añadir nombres class a los elementos en el DOM a través de JavaScript?

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: yellow;
}
.title {
color: white;
}
</style>
<body>
<div class="container">
<h2>Blog Page </h2>
<div class="blog">
<h2 class="center title">How to learn JavaScript</h2>
<div class="card">
<p class="card-content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro.
</p>
</div>
<button class="left btn">Subscribe</button>
<button class="right btn">Mark as favorite</button>
</div>
</div>
</div>
</body>
<script>
</script>
</html>

salida

How to add a class name to an element in JavaScript? - 4

Para demostrarlo, vamos a añadir algunas clases materializan algunos de nuestros elementos. Quiero el título para alinear en el centro y el blog de dirigirse a tener un fondo negro. Además, quiero nuestras dos botones para ser negro.

<script>
const title=document.querySelector('h2');
const heading=document.querySelector('.title');
const subBtn=document.querySelector('.sub');
const favBtn=document.querySelector('.fav');
title.classList.add('center');
heading.classList.add('black');
subBtn.classList.add('black');
favBtn.classList.add('black');
</script>

salida

How to add a class name to an element in JavaScript? - 5

Gran! Nuestra HTML se ve mucho mejor ahora. Podemos añadir cualquier CSS class a un elemento utilizando JavaScript por conseguir una referencia a ese elemento, a continuación, utilizando la propiedad classList y llamando a continuación, añadir método y pasar el nombre class deseado como un interior de cadena. Digamos que desea suscribirse a este blog. Vamos a añadir un class que desactiva el código HTML y añadir a class cuando golpeamos el botón de suscripción.

.subscribed{
display: none;
}

Dentro de nuestra etiqueta script

subBtn.addEventListener('click',()=>{
alert("You've now subscribed to this blog post!");
subBtn.classList.add('subscribed');
})

Ahora, cuando hacemos clic en el botón de suscripción obtenemos una alerta y después de que los botones se desvanece!

salida

How to add a class name to an element in JavaScript? - 6

fresco! gancho Vamos a algo para el botón favorito también. Al hacer clic en él, quiero cambiar su color de rosa y darle una frontera. ¿Puede pensar en cómo vamos a hacer esto?

CSS:

.fav-triggered {
border: 2px solid pink;
color: salmon;
}

JavaScript:

favBtn.addEventListener('click',()=>{
favBtn.classList.add('fav-triggered');
})

salida

How to add a class name to an element in JavaScript? - 7

El botón tiene un estilo diferente de hacer clic!

lo tanto un montón de funcionalidad pueden implementarse utilizando método add para dar nuestras clases de Elementos usando JavaScript.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *