JavaScript隐藏元素的5种方法~纯干货分享

Hello ~ 可爱的小伙伴我们又见面啦。
下面是我和大家分享的JS隐藏元素的5种方法，希望可以帮助到有需要的小伙伴。
让我们一起来看看吧 GO！

第一种

<!DOCTYPE html>
<html lang="en">
<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: aquamarine;color: coral;font-size: 35px;}.a {display: none;}</style>
</head><body><button id="myBtn">点我有惊喜哦！</button><script>var btn = document.getElementById("myBtn")btn.addEventListener('click', function (event) {document.getElementById("myBtn").classList.add("a");})</script>
</body></html>

第二种

<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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隐藏元素的5种方法~纯干货分享相关推荐

【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
css隐藏元素触发点击事件,css隐藏元素的几种方法中可以触发点击事件的是？...
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
前端html隐藏元素方式,CSS 隐藏元素的八种方法
前言总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 念念不忘,必有回响;有一口气,点一盏灯. 正文说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种 ...
html 隐藏元素点击事件,css隐藏元素的几种方法中可以触发点击事件的是？
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
CSS“隐藏”元素的几种方法的对比
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
html隐藏元素hidden,CSS中隐藏元素的几种方法
几种方法的简单介绍 display:none 最常用的隐藏元素的方法 .hidden{ display:none } 将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间 ...
JavaScript 获取元素的8种方法
DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是 DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我 ...
CSS隐藏元素的五种方法
用css隐藏页面元素有许多种方法. 1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute opacity opacity ...

JavaScript隐藏元素的5种方法~纯干货分享

第一种

第二种

第三种

第四种

第五种

JavaScript隐藏元素的5种方法~纯干货分享相关推荐

最新文章

热门文章