使用 JavaScript 根据 URL 隐藏多个 DIV 元素

本教程旨在提供一种高效的方法，使用 JavaScript 根据 URL 中是否包含特定文本来隐藏多个具有特定 ID 的 HTML 元素。通过使用 ID 列表和循环，可以避免重复代码，并允许同时修改元素的多个样式属性，提高代码的可维护性和可读性。同时，教程也包含了错误处理，以应对 ID 不存在的情况。

在 Web 开发中，经常需要根据 URL 的不同来动态调整页面元素的显示。当需要隐藏多个元素时，重复编写相同的代码显得冗余且难以维护。本文将介绍如何使用 JavaScript 结合 URL 判断，高效地隐藏多个具有特定 ID 的 HTML 元素，并提供错误处理机制。

核心思路

1. 获取 URL: 使用 window.location.href 获取当前页面的完整 URL。
2. 判断 URL 是否包含特定文本: 使用 url.search(‘特定文本’) > 0 判断 URL 中是否包含指定的关键词。
3. 创建 ID 列表: 定义一个包含需要隐藏的元素 ID 的数组。
4. 循环遍历 ID 列表: 使用 forEach 方法遍历 ID 列表。
5. 获取元素: 在循环中，使用 document.getElementById(id) 根据 ID 获取对应的 HTML 元素。
6. 判断元素是否存在: 检查获取到的元素是否为 null。如果为 null，则表示该 ID 对应的元素不存在，输出警告信息。
7. 修改元素样式: 如果元素存在，则修改其 style 属性，例如设置 display = “none” 和 visibility = “hidden” 来隐藏元素。

示例代码

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

以下是一个完整的示例代码，演示了如何根据 URL 隐藏多个元素，并处理 ID 不存在的情况。

  var url = window.location.href;
// Check if URL contains the keyword
if( url.search( 'thisword' ) > 0 ) {
const idList = ['something', 'something-else', 'another-thing', 'yet-another'];
idList.forEach((id) => {
const element = document.getElementById(id);
if (element != null) {
element.style.display = 'none';
element.style.visibility = 'hidden';
} else {
console.warn(`An ID was specified for an element that was not found - ${id}`);
}
});
}

HTML 示例

以下是一个简单的 HTML 结构，用于演示上述 JavaScript 代码的效果。

<div class="container">
<div id="something">This is something.</div>
<div id="something-else">This is something else.</div>
<div id="not-a-thing">This is not a thing.</div>
<div id="another-thing">This is another thing.</div>
<div id="yet-another">This is yet another thing.</div>
</div>

代码解释

• idList: 定义了一个包含需要隐藏的元素 ID 的数组。你可以根据实际情况修改这个数组，添加或删除 ID。
• forEach: 用于循环遍历 idList 数组。
• document.getElementById(id): 根据 ID 获取对应的 HTML 元素。
• element != null: 判断元素是否存在。如果元素不存在，则输出警告信息到控制台。
• element.style.display = ‘none’: 将元素的 display 属性设置为 none，使其在页面上不可见。
• element.style.visibility = ‘hidden’: 将元素的 visibility 属性设置为 hidden，使其在页面上隐藏，但仍然占据原来的空间。
• console.warn(…): 在控制台输出警告信息，方便调试。

注意事项

• 确保 HTML 元素具有唯一的 ID。
• 在 JavaScript 代码执行之前，确保 HTML 元素已经加载到页面上。可以将 JavaScript 代码放在