如何使 HTML 元素默认隐藏？答案

【问题标题】：How do I make an HTML element hidden by default?如何使 HTML 元素默认隐藏？
【发布时间】：2023-02-01 01:47:45
【问题描述】：

我编写了一个函数来在单击 span#note 时显示我的 span#note- 元素。我想默认隐藏span#note-，但我做不到。

我的代码：

<h1>Republic of Labrador<br>Sub-Presidential Elections <span onclick="showOnClick()" id="note" title="Not all candidates are listed, and the vote ratioes for the listed candidates are approximated.
            Hover over a candidate's name to see their vote ratio.">&#9432;</span></h1>
    <br>
    <span id="note-">Not all candidates are listed, and the vote ratioes for the listed candidates
        are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
    <script>

        function showOnClick() {
            var x = document.getElementById("note-");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

我尝试默认隐藏span#note-：

<span id="note-" onload="hideOnLoad()">Not all candidates are listed, and the vote ratioes for the listed candidates
        are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
    <script>
        function hideOnLoad() {
            var y = document.getElementById("note-");
            y.style.display = "none";
        }
        function showOnClick() {
            var x = document.getElementById("note-");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

我希望 span#note- 默认隐藏。

【问题讨论】：

你试过<span id="note-" style="display: none">了吗？
@PrerakSola 我刚刚试过了，它奏效了。谢谢！

标签： javascript html

【解决方案1】：

你的问题是 onload 触发器，它不会在 .在你的 2 个函数之后，你需要像这样设置你的代码：

document.addEventListener('load', () => {
    hideOnLoad();
})

也就是说，将其设置为 display: none 可能会更好；通过 CSS 或样式，并在需要时简单地显示它。

【讨论】：

【解决方案2】：

我想你忘了调用你的 hideOnLoad() 函数。无论哪种方式，我认为您应该使用 CSS 隐藏元素，方法是使用 style="display: none;"。

【讨论】：

【解决方案3】：

onLoad 仅适用于图像或标签等外部资源。如果您想保留第二个示例，则必须将 onLoad="hideOnLoad()" 属性一直移动到 body 标记。

更简单的解决方案是将其隐藏为 html 中元素 style="display:none; 的初始样式的一部分。下面是您更新元素的第一个示例。

<h1>Republic of Labrador<br>Sub-Presidential Elections <span onclick="showOnClick()" id="note" title="Not all candidates are listed, and the vote ratioes for the listed candidates are approximated.
            Hover over a candidate's name to see their vote ratio.">&#9432;</span></h1>
    <br>
    <span id="note-" style="display: none;">Not all candidates are listed, and the vote ratioes for the listed candidates
        are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
    <script>

        function showOnClick() {
            var x = document.getElementById("note-");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

【讨论】：