0
233
VistasCómo cambiar un FontA. icono a otro que tiene el mismo nombre de clase
He estado tratando de un FontA. icon a otro que tenga el mismo nombre de clase. Lo que intenté fue agregar un nombre de clase llamado "activo". Debido a que solo había dos íconos para cambiar de un lado a otro, pensé que HTML puede mostrar un ícono que quiero al verificar si el ícono tiene "activo". Cuando el ícono tiene "activo", entonces quiero mostrarlo, pero si no, no necesito hacerlo. Creo que el problema es que tienen los mismos nombres de clase.
El JS mostró este problema. 
Además, ¿solo hay una forma de ocultar un elemento? Incluso si agregué estos a continuación,
opacity: 0; visibility: hidden; Vi un espacio en blanco en una página. No me gustó, así que escribí display: none; en cambio. Pero solo quiero saber que hay otras formas de ocultar un elemento. 
1 Respuestas
Responde la pregunta0
No entenderé bien tu consulta, pero por lo que entiendo, quieres cambiar el ícono de usar js.
Solo se puede hacer usando CSS.
"Simplemente use className.active para simplemente cambiar el estilo del Elemento de clase. 'Ej: - .bi-list.active' Cambiará el estilo solo en la clase que tiene .active como elemento de clase".
Para CSS solo con el mismo Cl
let icon1 = document.querySelectorAll('.bi')[0]; let icon2 = document.querySelectorAll('.bi')[1]; function changeIcon(){ icon1.classList.toggle('active'); icon2.classList.toggle('active'); } i{ display:none; } i.active{ display:inline; } <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css"> </head> <body> <span> <i class="bi bi-list active" onclick="changeIcon()"></i> <i class="bi bi-x-lg" onclick="changeIcon()"></i> </span> </body> nombre de culo
Para JavaScript:
let icon = document.querySelector('.bi-list'); function ChangeIcon(){ if(icon.classList.item(1) == "bi-list"){ icon.classList.remove("bi-list"); icon.classList.add("bi-x-lg"); } else{ icon.classList.remove("bi-x-lg"); icon.classList.add("bi-list"); } } .menu .bi{ color:blue; display:inline; } <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css"> </head> <body> <span class="menu"> <i class="bi bi-list" onclick="ChangeIcon()"></i> <!--<i class="bi bi-list active" onclick="ChangeIcon()"></i> <i class="bi bi-x-lg"></i>--> </span> </body> </html> Y para las mismas clases, puede usar document.querySelectorAll('.bi')[0] para acceder al primer elemento y ('.bi')[1} para acceder al segundo elemento.
Si quieres que cambie algo en este código, ¡avísame!