Home >Web Front-end >Front-end Q&A >How to hide element value in javascript
How to hide element value in javascript
- 藏色散人Original
- 2021-07-17 14:05:503480browse
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.
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: 
The first method hides before
does not hide after Occupy the original position
Second methodHide the previous position
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('test');
if(t.style.display === 'none') {
t.style.display = 'block';// 以块级元素显示
} else {
t.style.display = 'none'; // 隐藏
}
}
function fn2(){
var t = document.getElementById('test');
if(t.style.visibility === 'hidden') {
t.style.visibility = 'visible';
} else {
t.style.visibility = 'hidden';
}
}
</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!