前端项目实战178-利用原生实现div关闭功能

简介: 前端项目实战178-利用原生实现div关闭功能
<div className={styles['sizeName']}>
 <a onClick={()=>{handleClose(item.sizeId)}} 
href="javascript:void(0)" className={styles['close']} >x</a>
<span>{item.sizeName}</span></div>
.sizeName {
  width: 90px;
  border: 1px solid #ccc;
  text-align: center;
  position: relative;
}
.close {
  position: absolute;
  display: inline-block;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: aliceblue;
  line-height: 15px;
  cursor: pointer;
  text-decoration: underline;
  vertical-align: top;
}
相关文章
|
11天前
|
XML 前端开发 JavaScript
前端技术的演变与实战应用
前端技术的演变与实战应用
|
2月前
|
前端开发 UED
微前端实战
微前端实战
27 2
|
3月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
99 0
|
3月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
37 0
|
3月前
|
XML 前端开发 JavaScript
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
32 0
|
5天前
|
JavaScript 前端开发
【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
【5月更文挑战第1天】【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
|
7天前
|
JSON JavaScript 前端开发
前端框架vue的样式操作,以及vue提供的属性功能应用实战
前端框架vue的样式操作,以及vue提供的属性功能应用实战
|
7天前
|
JavaScript 前端开发 数据安全/隐私保护
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)
|
7天前
|
JavaScript 前端开发 Python
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(一)
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(一)
|
20天前
|
前端开发 安全 JavaScript
前端安全防护:XSS、CSRF攻防策略与实战
【4月更文挑战第13天】本文探讨了XSS和CSRF攻击的类型、危害及防御方法。XSS攻击通过注入恶意脚本威胁用户安全,分为存储型、反射型和DOM型。CSRF攻击利用用户已登录状态发起恶意请求,可能导致账户状态改变和数据泄露。防御XSS包括输入验证、输出编码和启用Content Security Policy(CSP)。针对CSRF,可使用Anti-CSRF Tokens、设置SameSite Cookie属性和启用HTTPS。开发者应采取这些策略保护用户数据和网站稳定性。
52 0