JavaScript类型错误：无法读取 null 的 'style' 属性

Question

JavaScript类型错误：无法读取 null 的 'style' 属性

50

我有 JavaScript 代码，下面这行有问题。

if ((hr==20)) document.write("Good Night"); document.getElementById('Night).style.display=''

错误

Uncaught TypeError: Cannot read property 'style' of null at Column 69

我的 div 标签细节如下：

    <div id="Night" style="display: none;">
    <img src="Img/night.png" style="position: fixed; top: 0px; left: 5%; height: auto; width: 100%; z-index: -2147483640;">
    <img src="Img/moon.gif" style="position: fixed; top: 0px; left: 5%; height: 100%; width: auto; z-index: -2147483639;"></div>

完整的JavaScript：

    <script language="JavaScript">
    <!--
    document.write("<dl><dd>")
    day = new Date()
    hr = day.getHours()
    if ((hr==1)||(hr==2)||(hr==3)||(hr==4) || (hr==5)) document.write("Should not you be sleeping?")
    if ((hr==6) || (hr==7) || (hr==8) || (hr==9) || (hr==10) || (hr==11)) document.write("Good Morning!")
    if ((hr==12)) document.write("Let's have lunch?")
    if ((hr==13) || (hr==14) || (hr==15) || (hr==16) || (hr==17)) document.write("Good afternoon!")
    if ((hr==18) || (hr==19)) document.write("Good late afternoon!")
    if ((hr==20)) document.write("Good Night"); document.getElementById('Night').style.display=''
    if ((hr==21)) document.write("Good Night"); document.getElementById('Night').style.display='none'
    if ((hr==22)) document.write("Good Night")
    if (hr==23) document.write("Oh My! It's almost midnight!")
    if (hr==0) document.write("Midnight!<br>It is already tomorrow!") document.write("</dl>")
    //--->
    </script>

有人能帮助我吗？

- JK - ASP

7

确保你的脚本在文档准备好后才运行 - 如果你试图在DOM完全加载之前对其进行操作，那么当你尝试选择它们时，DOM元素可能还没有可用。 - kinakuta

1

看起来在您调用此脚本时，<div>节点不存在。请尝试将JavaScript代码移动到<body>标签的主体中。 - rfoo

你需要提供更好的描述你在做什么。如果你正在尝试选择一个元素，但没有匹配项，那么如果我们看不到你的页面，怎么能知道问题出在哪里呢？ - user2736012

你将这个问题标记为 jquery，但是你似乎并没有使用它。实际上，使用jQuery会使它变得更容易。 - Sébastien

11个回答

4

这是因为 document.write 会覆盖您现有的代码，因此请将您的 div 放在 JavaScript 代码之前。例如：

CSS：

#mydiv { 
  visibility:hidden;
 }

在您的HTML文件中。

<div id="mydiv">
   <p>Hello world</p>
</div>
<script type="text/javascript">
   document.getElementById('mydiv').style.visibility='visible';
</script>

希望这对你有帮助。

- jfindley

2

最初的回答：简单地说，我认为你的代码中漏了一个单引号。

你的代码中可能缺少一个单引号。

if ((hr==20)) document.write("Good Night"); document.getElementById('Night"here").style.display=''

最初的回答应该是这样的：

它应该像这样

。

if ((hr==20)) document.write("Good Night"); document.getElementById('Night').style.display=''

- Ahmed Al Dini

2

您在 night 后面缺少一个单引号（'）。正确的写法应该是 getElementById('Night')。

- Yehuda Clinton

1

这种情况也可能会发生在您在加载JS脚本文件后编写HTML标记的情况下。

 <div id="MyBox" class="box"></div>
<script src="Script.js"></script>

现在，如果我尝试获取MyBox并在控制台中记录它，则:

const box = document.getElementById("MyBox");

会得到这种错误

Uncaught TypeError: Cannot read properties of null (reading 'style')
at Script.js:519:5

所以尝试移动您的外部js标签。

- Matin

1

对我来说，我的脚本标签在body元素外面。把它复制到关闭body标签之前就可以了。这样做有效。

enter code here

<h1 id = 'title'>Black Jack</h1>
<h4> by Meg</h4>

<p id="text-area">Welcome to blackJack!</p>
<button id="new-button">New Game</button>
<button id="hitbtn">Hit!</button>
<button id="staybtn">Stay</button>

 <script src="script.js"></script>

- Margaret Sitati

0

你的脚本源可能放错了位置。将链接到JS页面放在/body之下。

    </body>
    <script src="Index.js"></script>
    </html>

- Coder

0

可能出现错误的原因是JavaScript运行的时间比从网页中所需的对象加载的时间早得多。以下代码肯定可以解决这些问题。

if ( document.getElementById('Night) )
    document.getElementById('Night).style.display=''";

在调用对象的操作之前，检查DOM对象是否存在始终是一个好习惯。

- GitHubRobot

虽然这样做可以消除错误，但它不会像 OP 想要的那样将显示样式设置为“none”，而只会跳过此语句，导致意外结果。 - Prateek Surana

嗨，Surana，我很感激你的意见。事实上，当 JavaScript 事件监听器在目标 DOM 对象加载之前被调用时，会经常出现此类错误。但是，如果你检查对象的存在并且 DOM 对象的更改没有发生，那么肯定是代码出错了。 - GitHubRobot

0

在HTML中，将“defer”添加到您的行中。

<script src="Index.js" defer ></script>

它会在页面加载完成后加载JS。

- Tanishq Kr. Kaushal

0

我遇到了同样的问题，情况是我需要通过嵌入标签下载Flash游戏和通过iframe下载H5游戏，我需要一个加载框，当Flash或H5下载完成后，让加载框消失。好吧，Flash的那个很好用，但当事情涉及到iframe时，我找不到空值的属性“style”，所以我给它加了一个时钟，现在它可以正常工作了。

let clock = setInterval(() => {
        clearInterval(clock)
        clock = null
        document.getElementById('loading-box').style.display = 'none'
    }, 200)

- Anne Lee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

在您的脚本中，这部分内容：

document.getElementById('Noite')

必须返回null，同时您还试图将display属性设置为无效值。这第一部分出现null的可能原因有几个。

您在文档加载之前太早运行脚本，因此找不到Noite项目。
您的HTML中没有Noite项目。

我应该指出，在这种情况下使用document.write()可能表示存在问题。如果文档已经加载，则新的document.write()将清除旧内容并开始一个新的文档，因此找不到Noite项目。

如果文档尚未完全加载，因此您正在内联使用document.write()添加HTML以内联到当前文档，则您的文档尚未完全加载，因此可能找不到Noite项目。

解决方案可能是将脚本的这部分放在文档的最后，以便在此之前已经加载了所有内容。因此，请将其移动到您的body的末尾：

document.getElementById('Noite').style.display='block';

同时，请确保在文档加载完成后，javascript中不存在document.write()语句（因为它们会清除先前的文档并开始一个新文档）。

此外，将display属性设置为"display"对我来说没有意义。该样式属性的有效选项有"block"、"inline"、"none"、"table"等等... 我不知道任何名为"display"的选项。请参见此处以查看display属性的有效选项。

您可以在此演示中看到修复后的代码： http://jsfiddle.net/jfriend00/yVJY4/。该jsFiddle已配置为将JavaScript放置在文档主体末尾，因此它会在文档加载完成后运行。

P.S. 我应该指出，您在if语句中缺少大括号，并且在同一行包含多个语句，这使得您的代码非常误导和不清晰。

我非常难以理解您的要求，但是下面是一个经过整理后能正常运行的代码，您也可以在此处查看它的运行情况：http://jsfiddle.net/jfriend00/QCxwr/。以下是我所做更改的列表：

脚本位于文档主体中，但在引用它的内容之后。
我已为您的变量添加了var声明（这是一个很好的习惯）。
if语句已更改为if/else，这更有效率，并且更加自说明您正在做什么。
我已为每个if语句添加了大括号，这样绝对清楚哪些语句属于if/else，哪些不属于。
我正确地关闭了您插入的</dd>标记。
我已将style.display = '';更改为style.display = 'block';。
我为每个语句的末尾添加了分号（这是另一个良好的习惯）。

代码如下：

<div id="Night" style="display: none;">
    <img src="Img/night.png" style="position: fixed; top: 0px; left: 5%; height: auto; width: 100%; z-index: -2147483640;">
    <img src="Img/moon.gif" style="position: fixed; top: 0px; left: 5%; height: 100%; width: auto; z-index: -2147483639;">
</div>    
<script>
document.write("<dl><dd>");
var day = new Date();
var hr = day.getHours();
if (hr == 0) {
    document.write("Meia-noite!<br>Já é amanhã!");
} else if (hr <=5 ) {
    document.write("&nbsp;&nbsp;Você não<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;devia<br>&nbsp;&nbsp;&nbsp;&nbsp;estar<br>dormindo?");
} else if (hr <= 11) {         
    document.write("Bom dia!");
} else if (hr == 12) {
    document.write("&nbsp;&nbsp;&nbsp;&nbsp;Vamos<br>&nbsp;almoçar?");
} else if (hr <= 17) {
    document.write("Boa Tarde");
} else if (hr <= 19) {
    document.write("&nbsp;Bom final<br>&nbsp;de tarde!");
} else if (hr == 20) {
    document.write("&nbsp;Boa Noite"); 
    document.getElementById('Noite').style.display='block';
} else if (hr == 21) {
    document.write("&nbsp;Boa Noite"); 
    document.getElementById('Noite').style.display='none';
} else if (hr == 22) {
    document.write("&nbsp;Boa Noite");
} else if (hr == 23) {
    document.write("Ó Meu! Já é quase meia-noite!");
}
document.write("</dl></dd>");
</script>