本文摘自PHP中文网,作者藏色散人,侵删。
javascript隐藏元素值的方法:1、设置元素style属性中的display,语句如“t.style.display= 'none';”;2、设置元素style属性中的visibility。
本文操作环境:windows7系统、javascript1.8.5版,DELL G3电脑
javascript隐藏和显示元素
使页面元素隐藏和显示可以有两种方式:
方式一:设置元素style属性中的display
1 2 3 | var t = document.getElementById( 'test' );
t.style.display = 'none' ;
t.style.display = 'block' ;
|
方式二:设置元素style属性中的visibility
1 2 3 | var t = document.getElementById( 'test' );
t.style.visibility = 'hidden' ;
t.style.visibility = 'visible' ;
|
这两种方式的区别是:设置display隐藏后不占用原来的位置,而通过visibility进行隐藏后元素位置任然被占用。
效果如下所示:
第一种方式隐藏前
隐藏后不占用原来的位置
第二种方式隐藏前
第二种方式隐藏后,任然占据原来的位置。
完整代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <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>
|
推荐学习:《javascript高级教程》
以上就是javascript怎么隐藏元素值的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript中怎么求偶数和
给大家分享九个 javascript 图片懒加载库
详解css和js动画底层原理及如何优化它们的性能
javascript开发中常用的方法集
javascript怎么实现字幕滚动
javascript怎么实现打印操作
讲解 js 内存管理机制及验证
javascript如何关闭浏览器事件
javascript数组如何转为string
foreach()、array.map()和array.filter()怎么用?(代码示例)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么隐藏元素值