JS实现关闭小广告特效


Posted in Javascript onJanuary 29, 2021

本文实例为大家分享了JS实现关闭小广告特效的具体代码,供大家参考,具体内容如下

知识点

1、获取元素
2、通过元素获取父元素
3、删除节点
4、设置元素隐藏

运行效果

直接删除

JS实现关闭小广告特效

隐藏

JS实现关闭小广告特效

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #box{
   height: 200px;
   width: 200px;
   position: relative;
   display: inline-block;
  }
  #box>#icon{
   height: 100%;
   width: 100%;
  }
  div>img:nth-child(2){
   height: 30px;
   width: 30px;
   position: absolute;
   top: 0;
   right: 0;
   cursor: pointer;
  }
 </style>
</head>
<body>
<div id="box">
 <img id="icon" src="images/阿鲁20.gif" alt="">
 <img id="close" src="images/删除.png" alt="">
</div>
<script>
 window.onload = function (ev) {
  // 1. 获取关闭标签
  var close = document.querySelector('#close');
  // 2. 接听点击
  close.onclick = function (ev1) {
   // 直接删除
   // this.parentElement.remove();
   // this.parentNode.remove();
   //隐藏
   this.parentElement.style.display = 'none';
   // this.parentElement.setAttribute('style','display:none');
  }
 }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
prototype.js常用函数详解
Jun 18 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
JS常见算法详解
Feb 28 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
vue element-ui实现动态面包屑导航
Dec 23 #Javascript
vue实现图片上传预览功能
Dec 23 #Javascript
vue项目实现图片上传功能
Dec 23 #Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 #Javascript
vue图片上传组件使用详解
Dec 23 #Javascript
微信小程序实现签字功能
Dec 23 #Javascript
使用JS location实现搜索框历史记录功能
Dec 23 #Javascript
You might like
php图片验证码代码
2008/03/27 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
javascript按位非运算符的使用方法
2013/11/14 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
基于python实现百度翻译功能
2019/05/09 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python实现汇率转换操作
2020/05/03 Python
keras实现多种分类网络的方式
2020/06/11 Python
python 读取.nii格式图像实例
2020/07/01 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
策划助理岗位职责
2013/11/18 职场文书
党校培训思想汇报
2014/01/03 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
大学生助学金感谢信
2015/01/21 职场文书
狂人日记读书笔记
2015/06/30 职场文书
通讯稿范文
2015/07/22 职场文书