如何用JavaScript设置元素标签文本加粗？解决TypeError报错问题

原代码 #

HTML代码 #

<div id="PDF">
    <input type="checkbox" id="pdf" name="pdf" value="pdf">
    <label for="pdf">PDF</label>
</div>

JavaScript代码 #

document.addEventListener('change',function(event){
    if(event.target.id == "pdf"){
        if(event.target.checked == true){
            event.target.label.style.fontWeight = "bold";
        }
        else{
            event.target.label.style.fontWeight = "normal";
        }
    }
});

报错信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

问题根源 #

Checkbox元素本身没有label属性，直接访问event.target.label会返回undefined，尝试读取undefined的style属性自然会抛出类型错误。

修复方案 #

方案1：通过for属性精准匹配Label #

利用document.querySelector根据label的for属性（与checkbox的id对应）查找元素：

document.addEventListener('change',function(event){
    if(event.target.id === "pdf"){
        const label = document.querySelector(`label[for="${event.target.id}"]`);
        label.style.fontWeight = event.target.checked ? "bold" : "normal";
    }
});

方案2：利用DOM相邻关系获取Label #

由于label是checkbox的同级紧邻元素，可通过nextElementSibling直接获取：

document.addEventListener('change',function(event){
    if(event.target.id === "pdf"){
        const label = event.target.nextElementSibling;
        label.style.fontWeight = event.target.checked ? "bold" : "normal";
    }
});

优化建议：直接绑定Checkbox事件 #

避免全局监听的性能损耗，直接给目标Checkbox绑定change事件：

const pdfCheckbox = document.getElementById('pdf');
pdfCheckbox.addEventListener('change', function() {
    const label = document.querySelector(`label[for="${this.id}"]`);
    label.style.fontWeight = this.checked ? "bold" : "normal";
});

内容的提问来源于stack exchange，提问作者user21917572