如何使用 javascript 更改 bootstrap 图标的属性

How to change bootstrap icon's attributes using javascript

我需要-

  1. 加载 DOM 内容时创建 bootstrap 图标(心形)
  2. 当点击图标时,心形图标填充红色(这里我用的是心形填充图标)
  3. 两个图标都比原始

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>

当我点击心形时,它填充的是黑色,而不是红色。我也不知道如何通过增加宽度和高度的值来使其变大。我看到了与此相关的其他问题,但其中 none 解决了我的问题。

首先,由于您使用了 bootstrap 图标,而它们只是与 CSS content 属性 一起使用,您无权访问 [=13] =] 属性 所以它不会按预期工作,或者,你应该使用 colorfont-size 属性 来实现你想要的。

为了在 javascript 中使用它,您需要使用 style 属性 然后访问它们的属性 (如 colorfontSize)在里面。使用相同的解决方案,您可以使用 font-size 属性.

更改它们的大小

这是上述方法的最终产品:

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>

标签的内容可以被视为文本,所以你应该使用“color”属性来改变颜色,使用“font-size”让它变大,你可以创建一个class css 上的这两个属性,并在单击图标后将 class 分配给元素。

CSS:

.active { color: red; font-size: 24px }

JS:

(...)
heart.onclick = function() {
  this.classList.add('active')
}