Question

我给背景颜色指定了位于头（内部CSS）中的样式标签中的div ID f1，f2，f3，f4的宽度，但是当我运行代码时它们不会显示。如果我应用内联CSS，那么它将起作用。我已经过滤掉了代码，这不是完整的代码，但将有助于解决我的问题。

function Coordinates() {
  var x;
  var y;
  x = document.getElementById("mynumber3").value;
  y = document.getElementById("mynumber4").value;
  if (x > 0 && y > 0) {
    document.getElementById("f1").innerHTML = "(" + x + "," + y + ")";
  } else if (x < 0 && y > 0) {
    document.getElementById("f2").innerHTML = "(" + x + "," + y + ")";
  }
}

# f1 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
  position: fixed
}

# f2 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
}

# f3 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
}

# f4 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
}

<html>

<head>
</head>

<body>
  <div id="four">
    <h1>Quadrant</h1>
    <table>
      <tr>
        <td><label>Enter First Number</label></td>
        <td><input type="text" id="mynumber3"></td>
      </tr>
      <tr>
        <td><label>Enter Second Number</label></td>
        <td><input type="text" id="mynumber4"></td>
      </tr>
    </table>
    <button onclick="Coordinates()">Go</button>
    <div id="f1"></div>
    <div id="f2"></div>
    <div id="f3"></div>
    <div id="f4"></div>
  </div>
</body>

</html>

Answer 1

# f1，# f2，# f3和# f4是无效的CSS选择器。删除不必要的空间，它将起作用（应该为#f1，#f2，#f3和#f4）。

function Coordinates() {
  var x;
  var y;
  x = document.getElementById("mynumber3").value;
  y = document.getElementById("mynumber4").value;
  if (x > 0 && y > 0) {
    document.getElementById("f1").innerHTML = "(" + x + "," + y + ")";
  } else if (x < 0 && y > 0) {
    document.getElementById("f2").innerHTML = "(" + x + "," + y + ")";
  }
}

#f1 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
  position: fixed
}

#f2 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
}

#f3 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
}

#f4 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
}

<html>

<head>
</head>

<body>
  <div id="four">
    <h1>Quadrant</h1>
    <table>
      <tr>
        <td><label>Enter First Number</label></td>
        <td><input type="text" id="mynumber3"></td>
      </tr>
      <tr>
        <td><label>Enter Second Number</label></td>
        <td><input type="text" id="mynumber4"></td>
      </tr>
    </table>
    <button onclick="Coordinates()">Go</button>
    <div id="f1"></div>
    <div id="f2"></div>
    <div id="f3"></div>
    <div id="f4"></div>
  </div>
</body>

</html>

具有id，f2和f3的{{1}} s的div应该使用类而不是f4来设置样式，因为它们的CSS是完全相同（仅id与div id略有不同）。

f1

function Coordinates() {
  var x;
  var y;
  x = document.getElementById("mynumber3").value;
  y = document.getElementById("mynumber4").value;
  if (x > 0 && y > 0) {
    document.getElementById("f1").innerHTML = "(" + x + "," + y + ")";
  } else if (x < 0 && y > 0) {
    document.getElementById("f2").innerHTML = "(" + x + "," + y + ")";
  }
}

#f1 {
  background-color: #CCC;
  width: 12%;
  height: 12%;
  position: fixed
}

.f {
  background-color: #CCC;
  width: 12%;
  height: 12%;
}

内部CSS无法与Java脚本一起使用

1 个答案: