How to hide element value in javascript-Front-end Q&A-php.cn

How to hide element value in javascript

藏色散人

Release： 2023-01-07 11:44:01

Original

3481 people have browsed it

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(&#39;test&#39;);//选取id为test的元素
t.style.display = &#39;none&#39;;	// 隐藏选择的元素
t.style.display = &#39;block&#39;;	// 以块级样式显示

Copy after login

Method 2: Set the visibility

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

Copy after login

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>

Copy after login

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!