JavaScript 中修改元素显示属性的正确方法-小浪学习网

JavaScript 中修改元素显示属性的正确方法

本文旨在解决 JavaScript 中修改元素显示属性时遇到的 “Cannot read properties of NULL (reading ‘style’)” 错误。通过分析常见原因，提供使用 querySelector 和 getElementById 的正确方法，并强调确保元素存在的必要性，帮助开发者避免类似错误，轻松控制页面元素的可见性。

在 JavaScript 中动态修改 html 元素的样式是常见的需求，其中控制元素的显示与隐藏更是基础操作。当尝试通过 JavaScript 修改元素的 style.display 属性时，可能会遇到 “Cannot read properties of null (reading ‘style’)” 错误。这个错误通常意味着你尝试访问一个不存在的 HTML 元素的 style 属性。以下是几种常见的解决方法和注意事项：

1. 确认元素是否存在

最常见的原因是 JavaScript 代码在执行时，目标元素尚未加载到 dom 中。这可能发生在以下情况：

脚本执行顺序问题： JavaScript 代码在 HTML 元素之前执行。
元素 ID 或 class 名称错误： 在 getElementById 或 querySelector 中使用了错误的 ID 或 Class 名称。

解决方法：

立即学习“Java免费学习笔记（深入）”；

将 JavaScript 代码放在 </body> 标签之前： 确保在 HTML 结构完全加载完毕后再执行 JavaScript 代码。
使用 defer 或 async 属性： 在 <script> 标签中添加 defer 或 async 属性，让浏览器异步加载并执行脚本，避免阻塞 HTML 解析。
检查 ID 和 Class 名称： 仔细检查 JavaScript 代码中使用的 ID 和 Class 名称是否与 HTML 元素中的名称完全一致，区分大小写。

2. 使用 querySelector 和 getElementById

JavaScript 提供了两种主要方法来选择 HTML 元素：

document.getElementById(id)： 通过元素的 ID 选择元素。ID 在 HTML 文档中必须是唯一的。
document.querySelector(selector)： 使用 css 选择器选择元素。

示例代码：

// 使用 getElementById function openloginHudWithId() {     const loginHud = document.getElementById("loginHud");     if (loginHud) { // 确保元素存在         loginHud.style.display = "block";     } else {         console.error("Element with ID 'loginHud' not found.");     } }  // 使用 querySelector function openloginHudWithQuerySelector() {     const loginHud = document.querySelector(".loginHud");     if (loginHud) { // 确保元素存在         loginHud.style.display = "block";     } else {         console.error("Element with class 'loginHud' not found.");     } }

注意事项：

getElementById 只能通过 ID 选择元素，而 querySelector 可以使用更复杂的 CSS 选择器，例如 Class 名称、标签名称、属性选择器等。
querySelector 返回匹配选择器的第一个元素。如果需要选择多个元素，可以使用 querySelectorAll。
在使用 querySelector 时，需要注意 CSS 选择器的语法，例如使用 . 选择 Class 名称，使用 # 选择 ID。

3. 确保元素存在

在修改元素的 style 属性之前，务必确保元素已经成功获取到。可以通过以下方式进行检查：

使用 if 语句判断： 在获取到元素后，使用 if 语句判断元素是否为 null。如果为 null，则说明元素不存在，应该避免访问其 style 属性。
使用 console.log 输出元素： 在获取到元素后，使用 console.log 输出元素，检查是否成功获取到元素。

示例代码：

function openloginHud() {     const loginHud = document.getElementById("loginHud");      if (loginHud) {         console.log("loginHud element:", loginHud); // 检查是否成功获取元素         loginHud.style.display = "block";     } else {         console.error("Element with ID 'loginHud' not found.");     } }