javascript - 我的 CSS 或 JavaScript 都没有修改 <div> 标签

Question

Here是我在 JSFiddle 中说明的问题。我正在制作一个加载屏幕，它会在几秒钟后使用 jQuery 向上滑动。我对 jQuery 相当陌生，但对 HTML、JavaScript 或 CSS 并不陌生。与我通常的问题一样，我怀疑这有一个我忽略的非常明显的答案。我的问题是:为什么 div 不受任何影响？显然我需要链接到 jsfiddle.net 以附上代码...

HTML:

<div id="loader" style="height:0;width:0;">
<strong style="color:white">Loading...</strong>
</div>

JavaScript/jQuery:

var width = $(window).width();
var height = $(window).height();
document.getElementById("loader").style.height = height + "px";
document.getElementById("loader").style.width = width + "px";

CSS:

#loader {
  color: black;
  border: 1px solid black;
}

如果能提供任何帮助，我将不胜感激。

编辑:由于我缺乏声誉，无法用 8 小时的发帖时间来回答我自己的问题，所以必须这样做。 Meredith为我提供了解决方案 here .谢谢。

编辑 2:经过一些研究，我意识到我正试图在页面完全加载之前完成所有这些操作。当我尝试 Meredith 的方法时，它没有用。我将我的 JavaScript/jQuery 更改为:

$(document).ready(function() {
  var width = $(window).width();
  var height = $(window).height();
  document.getElementById("loader").style.height = height + "px";
  document.getElementById("loader").style.width = width + "px";
});

一切正常。

Answer 1

您的代码实际上只是(成功地)更改了 div 的高度和宽度，但为了在一段时间后向上滑动它什么也没做。我建议使用 jQuery 的 slideUp。在你的 javascript 之后添加:

setTimeout(function() {
    $("#loader").slideUp()
}, 1000)

$("#loader") 是 jQuery 使用“loader”id 访问 div 的方式。这只是一个示例，说明如何在某个预定义时间后向上滑动 div。您可能希望在加载过程完成后执行此操作。