如何使用 javascript 更改 bootstrap 图标的属性
How to change bootstrap icon's attributes using javascript
我需要-
- 加载 DOM 内容时创建 bootstrap 图标(心形)
- 当点击图标时,心形图标填充红色(这里我用的是心形填充图标)
- 两个图标都比原始
大
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] =] 属性 所以它不会按预期工作,或者,你应该使用 color
和 font-size
属性 来实现你想要的。
为了在 javascript 中使用它,您需要使用 style
属性 然后访问它们的属性 (如 color
和 fontSize
)在里面。使用相同的解决方案,您可以使用 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')
}
我需要-
- 加载 DOM 内容时创建 bootstrap 图标(心形)
- 当点击图标时,心形图标填充红色(这里我用的是心形填充图标)
- 两个图标都比原始 大
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] =] 属性 所以它不会按预期工作,或者,你应该使用 color
和 font-size
属性 来实现你想要的。
为了在 javascript 中使用它,您需要使用 style
属性 然后访问它们的属性 (如 color
和 fontSize
)在里面。使用相同的解决方案,您可以使用 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')
}