Question

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <body>
    <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>

    <script>
      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";
        }
      }
    </script>
  </body>
</html>

这是铬问题还是什么？

Answer 1

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

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

Javascript使用camelCase而不是破折号（camel-case），因为style.font-weight无效。

JSFiddle Demo

另请注意，您的<input>语法不正确，输入为自动关闭标记，其文字设置为value属性（在这种情况下，输入是一个复选框，可以＆＃39;有一个值）：

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

Answer 2

使用它可以帮助你

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

Answer 3

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

Answer 4

您没有设置正确的样式属性。

＆＃13;

var text = document.getElementById("text");

function validate(checkbox) {
  if (checkbox.checked) {
    text.innerHTML = text.innerHTML.toUpperCase();
  } else {
    text.innerHTML = text.innerHTML.toLowerCase()
  }
}

function validate2(checkbox) {
  if (checkbox.checked) {
    text.style.fontWeight = "bold";
  } else {
    text.style.fontWeight = "normal";
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>
  <div id="text" style="font-weight: normal">hello world!</div>
  <input id="remember" type="checkbox" onclick="validate(this)">Caps</input>
  <br>
  <input id="remember2" type="checkbox" onclick="validate2(this)">Bold</input>

  <script>
  </script>

</body>

</html>

＆＃13;

Javascript函数 - 样式更改无法正常工作

4 个答案: