Home  >  Article  >  Web Front-end  >  How to hide element value in javascript

How to hide element value in javascript

藏色散人
藏色散人Original
2021-07-17 14:05:503417browse

How to hide element values ​​in javascript: 1. Set the display in the element's style attribute, with statements such as "t.style.display= 'none';"; 2. Set the visibility in the element's style attribute.

How to hide element value in javascript

The operating environment of this article: windows7 system, javascript version 1.8.5, DELL G3 computer

javascript hiding and showing elements

There are two ways to hide and show page elements:

Method 1: Set elements display

var t = document.getElementById('test');//选取id为test的元素
t.style.display = 'none';	// 隐藏选择的元素
t.style.display = 'block';	// 以块级样式显示

Method 2: Set the visibility

var t = document.getElementById('test');
t.style.visibility = 'hidden';	// 隐藏元素
t.style.visibility = 'visible';	// 显示元素

in the style attribute of the element. The difference between these two methods is: setting the display to hide does not occupy the original position, but through visibility After hiding, the element position is still occupied.
The effect is as follows:
How to hide element value in javascript

The first method hides before

How to hide element value in javascript

does not hide after Occupy the original position

How to hide element value in javascript

Second methodHide the previous position

How to hide element value in javascript

Second method After hiding, it still occupies its original position.

The complete code is as follows:

<head>
    <script type="text/javascript">
        function fn1(){
            var t = document.getElementById(&#39;test&#39;);
            if(t.style.display === &#39;none&#39;) {
                t.style.display = &#39;block&#39;;// 以块级元素显示
            } else {
                t.style.display = &#39;none&#39;; // 隐藏
            }
        }

        function fn2(){
            var t = document.getElementById(&#39;test&#39;);
            if(t.style.visibility === &#39;hidden&#39;) {
                t.style.visibility = &#39;visible&#39;;
            } else {
                t.style.visibility = &#39;hidden&#39;;
            }
        }
    </script>
</head>

<body>
	<p id="test" style="border: solid 1px #e81515; width:500px;">
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	</p>
	<button onclick="fn1()">第一种方式</button>
	<button onclick="fn2()">第二种方式</button>
</body>

Recommended learning: "javascript Advanced Tutorial"

The above is the detailed content of How to hide element value in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn