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 相关文章推荐
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
基于js中document.cookie全面解析
Sep 14 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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重定向的三种方法分享
2012/02/22 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python高级用法总结
2018/05/26 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
爱心捐助倡议书
2014/05/19 职场文书
导游词之日月潭
2019/11/05 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
MyBatis 动态SQL全面详解
2021/10/05 MySQL