案例:js实现关闭淘宝二维码
案例:js实现关闭淘宝二维码
先看效果演示:
js实现过程:
第1步.获取页面元素
var x = document.getElementById('x');//id比较好用,因为id具有唯一性// var box = document.getElementsByClassName('box')[0];或者用类名去获取也可以
第2步.声明一个注册事件
x.onclick = function(){}
第3步.在第二步里面添加事件处理
//3.事件处理// box.style.display = 'none';或者用类名去获取让display=none也可以this.parentNode.style.display = 'none';
完整的代码如下:
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>关闭二维码</title><style>.box {border: 1px solid #D9D9D9;margin: 100px auto;position: relative;width: 107px;}#x {border: 1px solid #D9D9D9;width: 14px;height: 14px;line-height: 14px;color: #D6D6D6;cursor: pointer;position: absolute;top: 0;left: -15px;}</style>
</head>
<body><div class="box"><img src="data:images/taobao.jpg" alt=""/><span id="x">×</span>
</div></body>
<script>//1.获取页面元素var x = document.getElementById('x');// var box = document.getElementsByClassName('box')[0];//2.注册事件x.onclick = function(){//3.事件处理// box.style.display = 'none';this.parentNode.style.display = 'none';}
</script>
</html>
案例:js实现关闭淘宝二维码相关推荐
- 3.用js实现关闭淘宝二维码
用js实现关闭淘宝二维码 css代码如下: <style> *{ margin:0 ; padding: 0; } .box{ border: 1px solid black; margi ...
- Web APls 阶段——第四节——案例:关闭淘宝二维码案例
淘宝点击关闭二维码 需求:点击关闭之后,淘宝二维码关闭 分析: ①:点击的是关闭按钮 ②:关闭的是父盒子 核心:利用样式的显示和隐藏完成, display:none 隐藏元素 display:bloc ...
- 案例:js简单实现关闭淘宝二维码
<案例演示> <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- JavaScript-154:关闭淘宝二维码案例
样式 .box {position: relative;width: 300px;height: 300px;margin: 0 auto;border: 1px solid #ccc;text-al ...
- 利用js关闭淘宝二维码?
可下载图片 <html lang="en"> <head><meta charset="UTF-8"><meta na ...
- 淘宝二维码显示与隐藏
代码部分 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
- 淘宝二维码对网店推广的好处
1. 淘宝二维码好处淘宝买家通过手机上的二维码识别软件,扫描卖家发布的淘宝二维码,可以直接找到卖家的促销活动, 店铺首页,宝贝单品.免去输入网址.关键词搜索的麻烦.淘宝卖家可以将二维码印刷到包裹中的宣 ...
- JS前端调用TSC打印二维码、条码
公司让用js调用TSC打印二维码,本人已调试成功,希望大家有所帮助! ActiveX下载地址:ActiveX下载地址! 实现代码:JS前端调用TSC打印二维码实现代码 <HTML> < ...
- js前端根据链接生成二维码并转成图片下载
js前端根据链接生成二维码并转成图片下载 依赖于jquery.jquery.qrcode.min.js 1.html <div class="qrcode"></ ...
最新文章
- 销售收入科目确定VKOA
- C指针原理(42)-内存管理与控制
- android 个人理财系统,基于Android的个人理财系统的设计与实现
- 如何从零开始写一个 web 框架?
- linux查看基础硬件信息
- c++ cstring 转换 char_cstring.h库常用函数
- 使用Hyper-V创建虚拟机
- (13)System Verilog随机数组
- 使用go来做系统,如何比java node php 更 简单
- 【kafka】Consumer is not subscribed to any topics
- ORA-28002:密码过期时的处理…………
- 弹窗实用素材模板|UI设计中的弹窗设计技巧,快get
- BZOJ-2456-mode(思维题)
- icmp源代码 tcp/ip协议栈 c语言实现,ICMP处理《LwIP协议栈源码详解——TCP/IP协议的实现》...
- javascript异步机制 — call stack
- 苹果4如何添加时间插件_越狱后如何备份已添加的插件以及源?
- 计算机专业自我总结100字,毕业自我鉴定100字
- Reactor(反应器)模式
- 分布式轻量级任务调度框架-XXL-JOB(最全面,附带本人实战)
- iOS开发基础-序列帧动画之Tom猫
热门文章
- CEO,CTO,COO,CFO,CIO首席执行官,首席运营官,首席技术官
- 1.10 企业首席信息官CIO及其职责
- 微信小程序01---小程序初始
- C语言中不同类型的运算和比较问题
- TCC(TinyC)编译器汉化(中文编译器、汉语编程)之一:主文件汉化
- java编写某计算器控制台程序_计算器 - 进阶的憨狗 - 博客园
- 25_ue4实现二段跳,加速跑和瞬移
- R语言C指数,如何在R软件中求一致性指数( Harrell concordance index:C-index)?
- Mysql Unique Key 报错 Duplicate
- 仅用 CSS 实现赛博朋克 2077 风格视觉效果