Empecé a aprender los conceptos básicos de Javascript, aquí en js estoy tratando de cambiar el color del elemento, pero no puedo hacerlo incluso después de cambiar con style.color, el color no cambia. Aquí está mi código html del elemento que estoy tratando de cambiar el color:
<div class="btn"><a href="#">Login</a></div>Es un botón normal Este es mi código JS:
let k=document.getElementsByClassName("btn"); k[0].style.color="blue";Si alguien sabe lo que está mal aquí, por favor ayude.
Traté de cambiar el color usando style.color de la propiedad del documento js, y esperaba que el elemento cambiara el color
Funciona, lo único es que su <div> contiene un <a> que ya tenía un estilo definido
let k=document.getElementsByClassName("btn"); k[0].style.color="green"; // Links are already in blue, I put green only to see it quickly <a class="btn" href="#">Login</a>Esto no funciona porque su botón en sí no tiene texto. Es a etiqueta que tiene.
Hay varias formas de resolver su problema:
Si es posible, puede simplemente poner texto en su btn (en lugar de a etiqueta y luego cambiar el color del button como lo hizo).
por ejemplo: <button class="btn">Hello world</button>
Puede poner a clase en su etiqueta y actualizar el color de la etiqueta que aquí funcionará.
Por ejemplo :
<button class="btn2"> <a href='#' class="link">Hello world</a> </button>y luego en JS:
const link = document.getElementsByClassName("link")[0] link.style.color="blue" Puede recuperar a etiqueta con la clase de botón usando querySelector (documentación aquí)
Ejemplo: document.querySelector(".btn3 a").style.color="blue"
// solution 1 const btn1 = document.getElementsByClassName("btn")[0] btn1.style.color = "red"; // solution 2 const link = document.getElementsByClassName("link")[0] link.style.color="green" // solution 3 const link2 = document.querySelector(".btn3 a") link2.style.color="purple" <button class="btn"> Hello world </button> <button class="btn2"> <a href='#' class="link">Login</a> </button> <button class="btn3"> <a href='#'>Login</a> </button>¿Tiene que seleccionar por Classname? ¡Solo dale una identificación y hazlo así!
<div class="btn" id="bnt1"><a href="#">Login</a></div> let k=document.getElementsById("btn1"); k[0].style.color="blue";