在CSS中,可以通过属性选择器来选择具有特定属性的元素。当属性值等于某个CSS类名时,可以通过JavaScript来动态追加文本。
假设我们有一个按钮,其data-status
属性值等于某个CSS类名active
,我们希望在按钮上追加文本“已激活”。
<button class="btn" data-status="active">点击我</button>
.btn {
padding: 10px 20px;
font-size: 16px;
}
.active {
background-color: green;
color: white;
}
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
if (button.getAttribute('data-status') === 'active') {
button.textContent += ' 已激活';
}
});
});
原因:
解决方法:
DOMContentLoaded
事件中,确保在DOM加载完成后再执行。document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
if (button.getAttribute('data-status') === 'active') {
button.textContent += ' 已激活';
}
});
});
通过以上方法,可以确保文本能够正确追加到元素上。
领取专属 10元无门槛券
手把手带您无忧上云