JS控制元素隐藏的几种方法

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JS控制元素初始隐藏方法详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

在前端开发中，使用JavaScript控制元素的显示与隐藏是常见操作，但若未正确设置初始状态，元素可能在页面加载时意外可见。本文将深入探讨导致此问题的原因，并提供两种有效的解决方案：一是利用JavaScript在页面加载时强制隐藏元素，二是采用更推荐的CSS样式声明方式，确保元素在任何脚本执行前即处于隐藏状态，从而提升用户体验和代码健壮性。

理解问题：为何动态控制元素默认可见？

当我们在页面上设置一个复选框（checkbox）来控制某个输入字段或区域的显示与隐藏时，常见的JavaScript代码通常只在复选框的click或change事件发生后才执行相应的show()或hide()操作。

考虑以下HTML结构和JavaScript代码示例：

&lt;input type=&quot;checkbox&quot; id=&quot;beastmode&quot; name=&quot;beastmode&quot; tabindex=&quot;5&quot;&gt;Beast Mode</input>

<div class="input-group date" id="id_1">
    &lt;input type=&quot;text&quot; name=&quot;day11&quot; value=&quot;09:00 AM&quot; class=&quot;form-control&quot;
        placeholder=&quot;End time&quot; title=&quot;&quot; required/&gt;
    <div class="input-group-addon input-group-append">
        <div class="input-group-text">
            <i class="glyphicon glyphicon-time fa fa-clock-o"></i>
        </div>
    </div>
</div>

<script>
    $("#beastmode").click(function () {
        if ($(this).prop('checked') === true) {
            $('#id_1,#id_2').show();
        } else {
            $('#id_1,#id_2').hide();
        }
    });
</script>

这段代码的问题在于，它仅在#beastmode复选框被点击时才改变#id_1（以及可能的#id_2）的可见性。在页面初次加载时，没有任何事件触发，因此#id_1元素会保持其默认的display: block;（或其他默认显示状态），直到用户手动点击复选框一次，然后再次点击取消选中，它才会隐藏。这显然不是我们期望的默认行为。

核心原因是：JavaScript事件处理器只在事件发生时执行，它不会在页面加载时自动为元素设置初始状态。

解决方案一：使用JavaScript在页面加载时设置初始状态

为了确保元素在页面加载时就处于隐藏状态，我们可以利用JavaScript在DOM（文档对象模型）加载完成后立即执行隐藏操作。

使用jQuery的$(function() { ... });或$(document).ready(function() { ... });可以实现在DOM完全加载并解析后执行代码。

$(function () {
  $('#id_1,#id_2').hide(); // 在DOM加载完成后立即隐藏元素
});

$("#beastmode").click(function () {
    if ($(this).prop('checked') === true) {
        $('#id_1,#id_2').show();
    } else {
        $('#id_1,#id_2').hide();
    }
});

优点：

• 简单易实现，特别是对于已经使用jQuery的项目。
• 确保了元素在用户交互前处于正确的隐藏状态。

缺点：

• 依赖JavaScript的成功加载和执行。如果JavaScript加载失败、被禁用或执行缓慢，元素可能会在短时间内可见（即“闪烁”），然后才被隐藏。这被称为“未样式化内容闪烁”（FOUC - Flash Of Unstyled Content）。
• 将样式控制逻辑与行为逻辑混合在JavaScript中。

解决方案二：通过CSS设置元素的默认隐藏状态（推荐）

更健壮且推荐的方法是直接在CSS中声明元素的默认隐藏状态。这样，无论JavaScript是否加载或执行，元素在页面渲染之初就已经是隐藏的。

在你的样式表中添加以下CSS规则：

#id_1, #id_2 {
  display: none; /* 默认隐藏这些元素 */
}

将此CSS规则添加到你的