html 的隐藏三种形式-526互联

参考 https://blog.csdn.net/cnds123/article/details/128419485

第一种

使用HTML的hidden 属性，隐藏属性是一个 Boolean 类型的值，真说明隐藏，假说明不隐藏，空也是不隐藏

进入例子：

如下图，当点击了按钮1后不隐藏：

如下图，当点击了按钮2后隐藏：

代码实现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与隐藏方式一</title>
</head>
<body>
    <button type="button" onclick="show()">显示文本区域和一段文字</button>
    <button type="button" onclick="hide()">隐藏文本区域和一段文字</button>
    <br>
    <textarea id="output" cols="70" rows="6">文本框区域</textarea>
    <h3 id="h">一段文字 使用HTML的hidden属性，文本区域隐藏后不占用原来的位置</h3>
    <img id='pic' src="code.png">
    <script>
        function show(){
            var t=document.getElementById('output');//选取id为output的元素
            t.hidden=false;
            var h=document.getElementById('h');//选取id为h的元素
            h.hidden=false;
        }
        function hide(){
            var t=document.getElementById('output');//选取id为output的元素
            t.hidden=true;//设置隐藏元素
            var h=document.getElementById('h');//选取id为h的元素
            h.hidden=true;//设置隐藏元素
        }
    </script>


</body>
</html>

第二种设置的隐藏区域完全被隐藏

元素style 对象的display属性

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与隐藏的方式二</title>
</head>
<body>
<button type="button" onclick="show()">显示文本区区域</button>
<button type="button" onclick="hide()">隐藏文本区区域</button>
<br>
<textarea id="output" cols="70" rows="6">文本框区域</textarea>
<h3>使用元素style对象的display属性，文本区域隐藏后不占用原来的位置</h3>
<img id='pic' src="code.png">
<script>
    function show(){
        var t=document.getElementById('output')//选取id为output的元素
        t.style.display='block';//展示
    }
    function hide(){
        var t=document.getElementById('output')//选取id为output的元素
        t.style.display='none';//隐藏
    }
</script>

</body>
</html>

第三种点击隐藏按钮时隐藏的元素显示的是空白，没有完全隐藏

元素style的visibility属性

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与隐藏的方式二</title>
</head>
<body>
<button type="button" onclick="show()">显示文本区区域</button>
<button type="button" onclick="hide()">隐藏文本区区域</button>
<br>
<textarea id="output" cols="70" rows="6">文本框区域</textarea>
<h3>使用元素style对象的visibility属性，文本区域隐藏后其位置和大小仍然被占用，显示为空白</h3>
<img id='pic' src="code.png">
<script>
    function show(){
        var t=document.getElementById('output')//选取id为output的元素
        t.style.visibility='visible';//展示
    }
    function hide(){
        var t=document.getElementById('output')//选取id为output的元素
        t.style.visibility='hidden';//隐藏
    }
</script>

</body>
</html>

526互联

html 的隐藏 三种形式

html 的隐藏三种形式