Fatal编程技术网
  • javascript/
  • Javascript HTML/CSS/JS:Simple div不显示

Javascript HTML/CSS/JS:Simple div不显示

javascript html css

Javascript HTML/CSS/JS:Simple div不显示,javascript,html,css,Javascript,Html,Css,我只想理解为什么#div元素不会出现在下面简单的代码中： <!DOCTYPE html> <html> <body> <div id="div"></div> <style> #div{ color:black; width:50px; height:50px; } </style> <script> function algo(){

我只想理解为什么
#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>


#div{
颜色：黑色；
宽度：50px；
高度：50px；
}
函数algo（）{
警报（“ALGO”）；
}
document.querySelector（“#div”）.onclick=algo；
这是小提琴：

颜色
表示前景色。由于没有要显示的文本，因此div似乎没有显示。设置
背景以查看div



函数algo（）{
警报（“ALGO”）；
}
document.querySelector（“#div”）.onclick=algo

#div{
颜色：黑色；
宽度：50px；
高度：50px；
背景：#000；
}


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



函数algo（）{
警报（“ALGO”）；
}
document.querySelector（“#div”）.onclick=algo

#div{
背景色：黑色；
宽度：50px；
高度：50px；
}


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




#div{
背景色：黑色；
宽度：50px；
高度：50px；
}

你认为
颜色：黑色
应该把整个矩形涂成黑色吗？

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