16.dom-类元素操作<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;border: 1px solid red;}.box {background-color: red;}.box3 {width: 300px;height: 300px;}</style></head><body><div>11111</div><hr><div>2222</div><hr><div class="box22222">3333</div><script>// 设置类属性var arr=document.getElementsByTagName('div')for (var i=0;i<arr.length;i++){arr[i].classList.add("box")}var oDiv=document.getElementsByClassName("box3")[0]oDiv.classList.remove('box3')var oDiv=document.getElementsByClassName("box3")[0]alert(oDiv.classList.contains("box3"))var oDiv=document.getElementsByTagName("div")[2]oDiv.classList.toggle("box3")// 找不到box3的情况下会自动添加</script></body></html>17.模态框<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body input {/*设置成block可以居中显示*/display: block;margin: 0 auto;margin-top: 100px;background-color: pink;/*position: absolute;*//*top: 100px;*//*left: 50%;*/}.box {background-color: rgba(21,0,10,0.35);/*float: left;*//*width: 100%;*//*height: 100%;*//*绝对定位*/position: absolute;top: 0;bottom: 0;left: 0;right: 0;}.alert {width: 300px;height: 200px;background: white;/*margin: 0 auto;*//*margin-top: 100px;*//*这个好*/position: absolute;top: 100px;left: 50%;margin-left: -150px;text-align: center;line-height: 200px;}.x {width: 20px;height: 20px;background-color: red;text-align: center;line-height: 20px;float: right;}</style></head><body><input type="button" value="https://www.huyubaike.com/biancheng/点击模态框" id="btn"><script>var btn = document.getElementById('btn')btn.onclick = function (){// alert(123);测试var oDiv = document.createElement('div')oDiv.classList.add('box')// 给类绑定属性var body = document.getElementsByTagName('body')[0]// body.replaceChild(oDiv, btn);// 替换body.appendChild(oDiv)// 添加一个提示窗口var box1 = document.createElement('div')var box2 = document.createElement('div')box1.innerText = '这是一个模态框'box2.innerText = "x"box1.classList.add('alert')// 给类绑定属性. 方便添加样式box2.classList.add('x')oDiv.appendChild(box1)box1.appendChild(box2)// 给x点击事件绑定回退操作box2.onclick = function (){body.removeChild(oDiv)// 删除掉第一个窗口即可}}</script></body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body>input {/*设置成block可以居中显示*/display: block;margin: 0 auto;margin-top: 100px;background-color: pink;/*position: absolute;*//*top: 100px;*//*left: 50%;*/}.box {background-color: rgba(21,0,10,0.35);/*float: left;*//*width: 100%;*//*height: 100%;*//*绝对定位*/position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: none;}.alert {width: 300px;height: 200px;background: white;/*margin: 0 auto;*//*margin-top: 100px;*//*这个好*/position: absolute;top: 100px;left: 50%;margin-left: -150px;/*text-align: center;*//*line-height: 200px;*/}.x {width: 20px;height: 20px;background-color: red;position: absolute;top: 0;right: 0;text-align: center;line-height: 20px;}</style></head><body><input type="button" value="https://www.huyubaike.com/biancheng/点击模态框" id="btn"><div class="box"><div class="alert"><p>用户名: <input type="text" name="username"></p><p>密码: <input type="password" name="password"></p><p><input type="button" value="https://www.huyubaike.com/biancheng/submit"></p><div class="x">x</div></div></div><script>// 绑定点击事件: 通过将display: block实现var btn = document.getElementById('btn')var box1 = document.getElementsByClassName('box')[0]// 一定记得加上索引btn.onclick = function (){box1.style.display = 'block'}// 绑定回退事件var box3 = document.getElementsByClassName('x')[0]box3.onclick = function (){box1.style.display = "none";// 将输入框清空document.getElementsByName('username')[0].valuehttps://www.huyubaike.com/biancheng/= ''document.getElementsByName('password')[0].valuehttps://www.huyubaike.com/biancheng/= ''}</script></body></html>
经验总结扩展阅读
- 云原生时代的DevOps平台设计之道
- vue2使用组件进行父子互相传值的sync语法糖方法和原生方法
- JavaScript之无题之让人烦躁的模块化
- 云原生强大且灵活的持续集成CI开源框架Tekton实战-上
- 云原生下基于K8S声明式GitOps持续部署工具ArgoCD实战-上
- 云原生虚拟网络 tun/tap & veth-pair
- 原生Redis跨数据中心双向同步优化实践
- 五 JPA - 原生SQL实现增删改查
- Javascript 手写 LRU 算法
- 原生之罪中的桦城是哪里?