JavaScript隐藏元素的方法有多少种?在JavaScript中,我们想要实现隐藏元素有很多方法,例如使用元素对象.style.display="none"语句、使用对象.style.visibility="hidden"语句、使用对象.style.opacity=0语句和使用$(selector).hide()语句这四种方法,接下来我们详细了解看看。
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>
关于JavaScript隐藏元素的方法就介绍到这了,大家可以参考上述代码,希望本文对大家学习JavaScript有帮助,想要了解更多JavaScript的内容,请关注群英网络其它相关文章。
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595