HTML / Javascript：默认情况下是否可以设置文本样式。display=“ none”？

Question

通过现在设置我的html和javascript的方式，我可以在页面加载并显示每个按钮下的所有文本时使用它。 您可以单击该按钮以隐藏并在其下方显示文本。

是否有可能使默认情况下不显示所有文本？

我以为您默认情况下必须使e.style.display =“ none”，但是我不确定在这种情况下如何/在何处。

<script type="text/javascript">

function toggleMe(a)
{
var e=document.getElementById(a);

if(!e)
{

return true;
}

if(e.style.display=="none")
{
e.style.display="block"
}
else
{
e.style.display="none"
}
return true;
}
</script>

<input type="button" onclick="return toggleMe('para1')" value="Toggle"><br>
<p id="para1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

</div>
<br>
<input type="button" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

</span>

Answer 1

如果在页面上添加以下样式，则默认情况下段落将被隐藏。

<style>
    #para1, #para2{
        display:none;
    }
</style>

Answer 2

为您要通过defaut隐藏的每个元素创建一个类，即

<p class="hidden">some hidden text</p>
<p class="hidden">more hidden text</p>

<style>
    .hidden
    {
        display:none;
    }
</style>

Answer 3

CSS

首先，添加以下代码以使CSS类隐藏事物。

<style>
.hidden { display: none }
</style>

然后，将该类添加到默认情况下要隐藏的任何元素。 例如，

<p id="para1" class="hidden">

另外，这是一个简短的演示 ，介绍了如何使用jQuery缩短所有代码。 有一个toggleClass()函数，可用于轻松添加/删除（切换）类。