Necesito -
document.addEventListener('DOMContentLoaded', function () { var heart = document.createElement('i') heart.className = 'bi bi-heart' document.querySelector('#posts').append(heart) heart.onclick = function () { this.className = 'bi bi-heart-fill' this.setAttribute('fill', 'red') } } ) <head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"></head> <body><div id="posts"></div></body>Cuando hago clic en el corazón, se llena de negro, no de rojo. Tampoco sé cómo hacerlo más grande aumentando el valor de ancho y alto. Vi otras preguntas relacionadas con esto, pero ninguna de ellas resuelve mi problema.
En primer lugar, dado que usó íconos de arranque y solo funcionan con la propiedad de content CSS, no tiene acceso a la propiedad de fill dentro de ellos, por lo que no funcionará como se esperaba, alternativamente, debe trabajar con color y font-size propiedad para lograr lo que buscas.
Para usarlo dentro de javascript, debe usar la propiedad de style y luego acceder a sus atributos (como color y tamaño de fontSize ) dentro de él. Con la misma solución, puedes cambiar su tamaño con la propiedad font-size .
Aquí está el producto final de los enfoques anteriores:
document.addEventListener('DOMContentLoaded', function() { var heart = document.createElement('i') heart.className = 'bi bi-heart' document.querySelector('#posts').append(heart) heart.onclick = function() { this.className = 'bi bi-heart-fill' this.style.color = 'red' this.style.fontSize = '24px' } }) <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> </head> <body> <div id="posts"></div> </body>El contenido de la etiqueta se puede tratar como texto, por lo que debe usar el atributo "color" para cambiar el color y el "tamaño de fuente" para hacerlo más grande, puede crear una clase con ambas propiedades en css y asignar la clase al elemento una vez que se hace clic en el icono.
CSS:
.active { color: red; font-size: 24px }JS:
(...) heart.onclick = function() { this.classList.add('active') }