Question

我只想了解为什么#div元素无论如何都不会出现在以下简单代码中：

<!DOCTYPE html>
<html>
  <body>

  <div id="div"></div>


   <style>
  #div{
  color:black;
  width:50px;
  height:50px;
  }
  </style>
    <script>
   function algo(){
    alert("ALGO");
   }

  document.querySelector("#div").onclick = algo;
 </script>
   </body>
 </html>

这是小提琴：

http://jsfiddle.net/26pkt2y6/

Answer 1

color表示前景色。由于没有要显示的文字，似乎div不显示。设置background以查看div。

＆＃13;

function algo() {
  alert("ALGO");
}

document.querySelector("#div").onclick = algo;

＆＃13;

#div {
  color: black;
  width: 50px;
  height: 50px;
  background: #000;
}

＆＃13;

<div id="div"></div>

＆＃13;

Answer 2

因为它是空的，请尝试在div标签之间添加一些内容，或者如果您想要一个像按钮一样的块，则必须将CSS更改为：

<style>
  #div{
  background-color:black;
  width:50px;
  height:50px;
  }
  </style>

Answer 3

  div{
  color:black; change this to background-color:black;
  width:50px;
  height:50px;
  }

Answer 4

使用背景色作为颜色

Answer 5

你的div是空的，用css设置文本或样式，你应该使用背景颜色而不是颜色：

function algo(){
    alert("ALGO");
}
document.querySelector("#div").onclick = algo;

 #div{
  background-color:black;
  width:50px;
  height:50px;
}

<div id="div"></div>

HTML / CSS / JS：简单的div不显示

5 个答案: