Javascript 函数 - 样式更改不起作用

Question

我创建了 2 个简单的函数，但函数 2 不起作用，我尝试将其更改为style.font-weight = "bold";但随后所有崩溃，该怎么办？

function validate() {
  if (document.getElementById('remember').checked) {
    document.getElementById("text").innerHTML = "HELLO WORLD!";
  } else {
    document.getElementById("text").innerHTML = "hello world!";
  }
}

function validate2() {
  if (document.getElementById('remember2').checked) {
    document.getElementById("text").style = "bold";
  } else {
    document.getElementById("text").style = "normal";
  }
}

<div id="text" style="font-weight: normal">hello world!</div>
<input id="remember" type="checkbox" onclick="validate()">Caps</input>
<br>
<input id="remember2" type="checkbox" onclick="validate2()">Bold</input>

这是镀铬问题还是什么？

Answer 1

您没有指定要更改的 css 属性：

document.getElementById("text").style.fontWeight = "bold";

Javascript 使用camelCasedash( camel-case)代替 dash( )，就像 CSS 一样，所以style.font-weight是无效的。

document.getElementById("text").style.fontWeight = "bold";

var textEl = document.getElementById("text");

function validate() {
  if (document.getElementById('remember').checked) {
    textEl.innerHTML = "HELLO WORLD!";
  } else {
    textEl.innerHTML = "hello world!";
  }
}

function validate2() {
  if (document.getElementById('remember2').checked) {
    textEl.style.fontWeight = "bold";
  } else {
    textEl.style.fontWeight = "normal";
  }
}

另请注意，您的<input>语法不正确，输入是自闭合标签，并且它们的文本是使用value属性设置的（在这种情况下，输入是一个复选框，并且不能有值）：

<input id="remember2" type="checkbox" onclick="validate2()" />Bold