在选中单选按钮时设置粗体标签,可以通过以下步骤实现:
<input>
标签的type
属性设置为"radio"来创建单选按钮。为了确保它们在同一组中,你需要为每个单选按钮设置相同的name
属性。font-weight
属性将标签的文本设置为粗体。可以将font-weight
属性设置为"bold"或者设置一个数字值来指定粗细程度。querySelectorAll
方法选择所有的单选按钮,然后使用forEach
方法遍历它们,检查是否被选中,并根据情况为相应的标签添加或移除粗体样式。以下是一个示例的HTML、CSS和JavaScript代码:
HTML代码:
<input type="radio" name="format" value="bold">粗体
<input type="radio" name="format" value="normal">普通文本
<p id="label">这是一个标签</p>
CSS代码:
.bold {
font-weight: bold;
}
JavaScript代码:
var radios = document.querySelectorAll('input[name="format"]');
var label = document.getElementById('label');
radios.forEach(function(radio) {
radio.addEventListener('change', function() {
if (this.value === 'bold') {
label.classList.add('bold');
} else {
label.classList.remove('bold');
}
});
});
这样,当选中"粗体"单选按钮时,标签的文本将显示为粗体;当选中"普通文本"单选按钮时,标签的文本将恢复为普通样式。
如果你使用腾讯云进行云计算相关开发,可以参考腾讯云提供的云产品中与前端开发、后端开发、云原生、网络通信、人工智能、物联网等相关的产品和服务。请访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。
领取专属 10元无门槛券
手把手带您无忧上云