编程 Javascript

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>

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

JS实现关闭小广告特效

- Author -

KaiSarH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 解决“options为空或不是对象”

Dec 22 Javascript

ExtJs 表单提交登陆实现代码

Aug 19 Javascript

JS判断表单输入是否为空(示例代码)

Dec 23 Javascript

jquery使用Cookie和JSON记录用户最近浏览历史

Apr 19 Javascript

Bootstrap中表单控件状态(验证状态)

Aug 04 Javascript

jQuery Validate表单验证插件的基本使用方法及功能拓展

Jan 04 Javascript

JavaScript获取URL参数的方法之一

Mar 24 Javascript

关于foreach循环中遇到的问题小结

May 08 Javascript

vue-cli + sass 的正确打开方式图文详解

Oct 27 Javascript

写给小白看的JavaScript异步

Nov 29 Javascript

解决vue 退出动画无效的问题

Aug 09 Javascript

关于antd tree 和父子组件之间的传值问题(react 总结)

Jun 02 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