Question

如何在 javascript 中使元素的标签文本变为粗体？

2023-06-01

167

javascript

我的 HTML :

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

我的 JS :

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')

我该如何解决这个问题？

Answer 1

这里主要有两个问题。首先，事件目标没有标签属性。您应该明确选择标签并更改样式。其次，我建议仅将事件侦听器添加到 #pdf div 而不是整个文档。这样，您就不需要检查 ID，并且事件侦听器不会在每次更改时触发。例如：

document.getElementById("pdf").addEventListener("click", event => {
  const label = document.querySelector("label[for=pdf]");
  if(event.target.checked == true){
    label.style.fontWeight = "bold";
  }
  else{
    label.style.fontWeight = "normal";
  }
})

Answer 2

希望您一切安好..

let divid = document.getElementById('PDF');
let checkid = document.getElementById('pdf');
let labelid = document.getElementById('label');

 checkid.addEventListener( "change", () => {
       if(checkid.checked){
label.style.fontWeight='bold';
}
else{
label.style.fontWeight='normal';
}
      });

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

Answer 3

尝试此代码，实际上目标可以有多个标签。因此属性不是 label ，而是 labels 。

<div id="PDF">
  <input type="checkbox" id="pdf" name="pdf" value="pdf">
  <label for="pdf">PDF</label>
</div>
<script>
  document.addEventListener('change', function (event) {
    if (event.target.id == "pdf") {
      if (event.target.checked == true) {
        event.target.labels[0].style.fontWeight = "bold";
      } else {
        event.target.labels[0].style.fontWeight = "normal";
      }
    }
  });
</script>