DDR爱好者之家 Design By 杰米
1.原生js操作dom
const dom = getElementById(‘box')
2.vue官方方法:ref
vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到
< div class=“set” ref=“up”>
.set是我们要操作的dom对象,它的ref是 up
@click=“Alert”
给父元素一个点击事件,
接下来我们来编写这个方法
methods:{ "htmlcode"><template> <div id="app"> <div class="index-box"> <!--新增按钮--> <input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增"> <!--新增数据源弹框--> <div class="addDbSource-alert" ref="addAlert"> <div class="addAlert-top"> <!--添加数据源--> <input type="button" value="×" class="addAlert-close" @click="closeAddAlert"> </div> <div class="addAlert-content"> <div style="height: 1000px;"></div> </div> </div> </div> </div> </template> <script> export default { name: "Index", data(){ return { } }, methods:{ // 点击新增按钮,弹出新增数据源的弹框 showAddAlert(){ this.$refs.addAlert.style.display = "block"; }, // 点击 × 关闭新增数据源的弹框 closeAddAlert(){ this.$refs.addAlert.style.display = "none"; }, }, created(){ } } </script> <style scoped> #app{ width:100%; height:100%; overflow-y:auto; } /* 容器 */ .index-box{ width: 100%; height: 100%; background: #212224; display: flex; } /* 添加数据源按钮 */ #DbManagement-addBtn { width: 100px; height: 45px; border: none; border-radius: 10px; background: rgba(29, 211, 211, 1); box-shadow: 2px 2px 1px #014378; margin-left: 20px; margin-top: 17px; cursor: pointer; font-size: 20px; } /*新增数据源弹框*/ .addDbSource-alert{ position: fixed; top:0;left:0;right:0;bottom:0; margin:auto; width: 4rem;height: 4rem; background: #2b2c2f; display: none; } /*新增弹框头部*/ .addAlert-top{ width: 100%; height: 50px; background: #1dd3d3; line-height: 50px; font-size: 20px; box-sizing: border-box; padding-left: 20px; } /*新增弹框关闭*/ .addAlert-close{ background: #1dd3d3; border: none; font-size: 30px; cursor: pointer; float: right; margin-right: 20px; margin-top: 5px; } /*新增弹框内容部分*/ .addAlert-content{ width: 100%; box-sizing: border-box; padding: 0px 30px 20px; } /* 滚动条效果 */ /* 设置滚动条的样式 */ .addAlert-content::-webkit-scrollbar { width: 5px; } /* 滚动槽 */ .addAlert-content::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 6px rgba(40, 42, 44, 1); border-radius: 10px; */ } /* 滚动条滑块 */ .addAlert-content::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(29, 211, 211, 1); /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */ } .addAlert-content::-webkit-scrollbar-thumb:window-inactive { background: rgba(29, 211, 211, 1); } </style>CSS比正文和脚本加起来都多,如果你能看懂CSS,没理由学不会 ref
还有第三种方法,jQuery 操作dom,看完以后直呼不敢用
3.jQuery操作dom
"color: #ff0000">总结
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]