javascript 如何使HTML元素在默认情况下隐藏？

ukqbszuj 于 2023-02-02 发布在 Java

关注(0)|答案(5)|浏览(198)

我写了一个函数，当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-在默认情况下是隐藏的。

JavaScript

来源：https://stackoverflow.com/questions/75300845/how-do-i-make-an-html-element-hidden-by-default

5条答案

按热度按时间

djp7away1#

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

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

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

赞(0）回复(0）举报 2023-02-02

6pp0gazn2#

我想你忘了调用hideOnLoad（）函数，不管怎样，我想你应该使用CSS隐藏元素，方法是使用style=“display：无;"。

赞(0）回复(0）举报 2023-02-02

2fjabf4q3#

onLoad只适用于外部资源，如图像或标签。如果您想保留第二个示例，则必须将onLoad=“hideOnLoad（）”属性一直移到body标签。
更简单的解决方案是将其作为元素style="display:none;的初始样式的一部分隐藏在html中，下面是更新了该元素的第一个示例。

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

赞(0）回复(0）举报 2023-02-02

9avjhtql4#

默认情况下隐藏元素的最简单方法是使用CSS display属性

你可以简单地在HTML标签中添加一个CSS规则，或者你可以按照更好的做法创建一个单独的CSS文件。

1.内联规则：

只需向标记添加一个style属性。

<span id="note-" style="display:none;">any content here will not be displayed on initial load</span>

2. CSS文件：

创建名为styles.css的单独文件。在该文件中创建规则：

span#note- {
  display: none;
}

返回HTML文件，在文件顶部的head标记之间链接样式表：

<head>
  <link rel="stylesheet" href="styles.css">
</head>

在CSS display上阅读更多信息。除了display之外，如果你想让内容占据页面上的空间，但只是不显示内容，你也可以尝试visibility属性。
在您的示例中，一旦您使用了这些CSS方法之一隐藏元素，它将在页面初始加载时隐藏，然后您的showOnClick()脚本应该可以切换显示和关闭。

赞(0）回复(0）举报 2023-02-02

3lxsmp7m5#

看起来你的代码是正确的，你只需要调用每个函数。当我像这样运行代码时，我会让它正确地工作。

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";
    }
}
        
showOnClick(); // Call onclick
hideOnLoad(); // Hide Span on default

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 如何使HTML元素在默认情况下隐藏？

5条答案

相关问题

热门标签

最新问答