首页 > 解决方案 > DIV 不显示

问题描述

我想知道为什么我的 DIV 不会出现。控制台中没有弹出错误,所以我不确定是什么问题。我还检查了 Google Chrome 扩展程序的内容安全政策,看看我的代码是否没有遵循该政策,但一切似乎都很好。

HTML:

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

JavaScript:

(function() {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];

    Date.prototype.getMonthName = function() {
        return months[ this.getMonth() ];
    };
    Date.prototype.getDayName = function() {
        return days[ this.getDay() ];
    };
})();

var now = new Date();

var day = now.getDayName();
var month = now.getMonthName();

CSS:

#date {
  display: block;
  color: black;
  font-size: 50px;
  top: 50px;
  left: 50px;
}

标签: javascripthtmlcssgoogle-chrome-extension

解决方案


您需要填充日期 div 以使其显示某些内容。空 div 不占用任何空间。我使用 innerHTML 将日期和月份变量移动到元素中:

(function() {
  var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  Date.prototype.getMonthName = function() {
    return months[this.getMonth()];
  };
  Date.prototype.getDayName = function() {
    return days[this.getDay()];
  };
})();

var now = new Date();

var day = now.getDayName();
var month = now.getMonthName();
document.getElementById("date").innerHTML = day + " " + month;
#date {
  display: block;
  color: black;
  font-size: 50px;
  top: 50px;
  left: 50px;
}
<div id="date"></div>


推荐阅读