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()函數，可用於輕松添加/刪除（切換）類。