javascript怎么隐藏元素
程序员文章站
2022-02-03 20:30:49
...
javascript隐藏元素的方法:1、使用“元素对象.style.display="none"”语句;2、使用“元素对象.style.visibility="hidden"”语句;3、使用“元素对象.style.opacity=0”语句。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
javascript隐藏元素的几种方法
第一种
<!DOCTYPE html> <html> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <style> #myBtn { width: 300px; height: 150px; background-color: rgb(16, 130, 150); color: coral; font-size: 35px; } </style> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏元素</title> </head> <body> <button id="myBtn">点我有惊喜哦!</button> <script> var btn = document.getElementById("myBtn") btn.addEventListener('click', function (event) { document.getElementById("myBtn").style.display = "none"; }) </script> </body> </html>
第二种
<!DOCTYPE html> <html> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏元素</title> <style> #myBtn { width: 300px; height: 150px; background-color: rgb(220, 140, 228); color: coral; font-size: 35px; } </style> </head> <body> <button id="myBtn">点我有惊喜哦!</button> <script> var btn = document.getElementById("myBtn") btn.addEventListener('click', function (event) { document.getElementById("myBtn").style.visibility = "hidden"; }) </script> </body> </html>
第三种
<!DOCTYPE html> <html> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏元素</title> <style> #myBtn { width: 300px; height: 150px; background-color: rgb(192, 231, 128); color: coral; font-size: 35px; } </style> </head> <body> <button id="myBtn">点我有惊喜哦!</button> <script> var btn = document.getElementById("myBtn") btn.addEventListener('click', function (event) { document.getElementById("myBtn").style.opacity = 0; }) </script> </body> </html>
第四种
<!DOCTYPE html> <html> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏元素</title> <style> #myBtn { width: 300px; height: 150px; background-color: rgb(156, 97, 121); color: coral; font-size: 35px; } </style> </head> <body> <button id="myBtn">点我有惊喜哦!</button> <script> var btn = document.getElementById("myBtn") btn.addEventListener('click', function (event) { $("#myBtn").hide(); }) </script> </body> </html>
end~
【相关推荐:javascript学习教程】
以上就是javascript怎么隐藏元素的详细内容,更多请关注其它相关文章!
上一篇: css怎样点击div改变背景颜色
推荐阅读
-
javascript - 情感分析课题:怎么构建自己的情感词库
-
基于JavaScript实现移除(删除)数组中指定元素_javascript技巧
-
JavaScript中关于for循环删除数组元素内容时出现的问题
-
javascript获取作用在元素上面的样式属性代码_javascript技巧
-
javascript - 请问js对象如果字段是动态的,怎么取这个动态字段的值
-
javascript - 这个正则怎么匹配,又有%又有数字不确定位置
-
javascript - 怎么配置WebSocket服务器,用的SegmentFault
-
PHP怎么删除数组元素?
-
javascript学习笔记(二十) 获得和设置元素的特性(属性)_基础知识
-
JavaScript怎么求数组中位数