使用 JavaScript 中的可见性属性隐藏或显示 HTML 元素

可见性属性用于隐藏或显示 HTML 元素的内容。可见性属性指定元素当前在页面上可见。 'hidden' 值可用于隐藏元素。与 display 属性不同，这会隐藏元素，但不会删除元素占用的空间。

句法：

element.style.visibility = 'hidden';
element.style.visibility = 'visible';

例子：

html

 

 
    
        .container {
            height: 80px;
            width: 250px;
            border: 2px solid black;
            background-color: green;
            color: white;
        }
    

 

    
        GeeksforGeeks
    
 
     

        Click the buttons to show or hide the green box
    
 
 
    
            Show Element
    
 
    
            Hide Element
    
 
    
        function showElement() {
            element = document.querySelector('.container');
            element.style.visibility = 'visible';
        }
 
        function hideElement() {
            element = document.querySelector('.container');
            element.style.visibility = 'hidden';
        }
    

 

输出：