如何让HTML元素默认隐藏？span#note-默认隐藏失败求助

你尝试用<span id="note-">的onload事件触发隐藏函数，但**<span>元素根本不支持onload事件**——这个事件只在<body>、<img>、<script>等少数元素加载完成时触发，所以你的hideOnLoad函数从来没执行过，元素自然默认显示。

下面给你三种可行的解决方式，按推荐程度排序：

1. 用CSS直接默认隐藏（最简单高效） #

直接给目标元素加CSS样式，页面加载时就自动隐藏，不需要额外的JS初始化逻辑：

<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>

或者把样式写到<style>标签里（更规范）：

<style>
    #note- {
        display: none;
    }
</style>
<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>

2. 在DOM加载完成后执行隐藏逻辑 #

如果不想用CSS，也可以在页面DOM加载完成后执行隐藏函数：

<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>
    // 页面DOM加载完成后自动执行隐藏
    document.addEventListener('DOMContentLoaded', function() {
        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>

或者直接把隐藏逻辑写在脚本里（因为脚本放在元素后面，执行时元素已经存在）：

<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>
    // 直接执行隐藏，无需额外函数
    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>

3. 用Class切换实现更健壮的逻辑 #

原有的切换逻辑只检查行内样式，容易出现判断偏差。可以用Class来控制显示隐藏，后续修改样式也更灵活：

<style>
    .hidden {
        display: none;
    }
</style>
<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>
<!-- 默认添加hidden类实现隐藏 -->
<span id="note-" class="hidden">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-");
        // 切换hidden类，一键控制显示/隐藏
        x.classList.toggle('hidden');
    }
</script>

内容的提问来源于stack exchange，提问作者William M. Rock