HTML 點擊按鈕 刪除或顯示元素

第一種,隱藏,即不可見。元素仍然存在,所以結構不會改變。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function removeElement()
        {
            if (document.getElementById("p1").style.visibility=="visible")
            {
                document.getElementById("p1").style.visibility="hidden";
            }
            else {
                document.getElementById("p1").style.visibility="visible";
            }
        }
    </script>
</head>
<body>

<h1>Hello</h1>

<p id="p1" style="visibility: hidden;">This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()"
       value="Do not display paragraph" />

</body>
</html>

第二種,元素不顯示,可能改變結構。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function removeElement()
        {
            if(document.getElementById("p1").style.display=="none")
            document.getElementById("p1").style.display="inherit";
            else
                document.getElementById("p1").style.display="none";
        }
    </script>
</head>
<body>

<h1>Hello</h1>

<p id="p1">This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()"
       value="Do not display paragraph" />

</body>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 女士們,先生們:飛機正在下降。請您回原位坐好,系好安全帶, 收起小桌板,將座椅靠背調整到正常位置...... 趙四...
    二木三皮閱讀 334評論 0 0
  • 我的github:https://github.com/fcott19/XformerRecyclerView 最...
    fcott閱讀 372評論 0 0
  • 我多么想 佇立岸邊,眺望思念的桅桿,凝眸遠方的白帆; 我...
    紅塵修行閱讀 192評論 0 0