1. 首頁 > 生活百科 > >

原生JavaScript( 三 )

生活百科原生JavaScript

14.dom-創建 刪除 替換<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;border: 1px solid red;}</style></head><body><div class="box"><p>1111</p><p>2222</p><p>3333</p><p>4444</p></div><script>// 創建元素var oDiv = document.createElement('div')// console.log(oDiv)oDiv.style.width = '50px'oDiv.style.height = "50px";oDiv.style.backgroundColor = 'red'// 末尾添加元素var box = document.getElementsByClassName('box')[0]box.appendChild(oDiv)// 插入子元素// box.insertBefore(新節點, 某個節點)var p3 = document.getElementsByTagName("p")[2]// console.log(p3)box.insertBefore(oDiv, p3)// 刪除子元素// var p4 = document.getElementsByTagName('p')[3]// box.removeChild(p4)// 替換子元素var p5 = document.getElementsByTagName('p')[3]// 尋找第四個p標簽console.log(p5)box.replaceChild(oDiv, p5)</script></body></html>15.dom-修改元素屬性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;border: 1px solid red;}</style></head><body><div class="box" name="123213123" style="background-color: pink"><div class="box2"></div><p>333333</p></div><img src="http://www.xxx.com/1.png" ><p id="ppp" name="new attribute">4444444</p><!--<input type="text">--><script>// 修改子元素var box=document.getElementsByClassName("box")[0]box.innerText="哈哈哈"box.innerHTML="<p>1111</p>"box.innerText="<p>哈哈哈哈啊</p>"http:// 會覆蓋之前的標簽// 屬性操作var res=box.getAttribute("name")var res=box.setAttribute("x","11111")box.removeAttribute("class")console.log(res)box.setAttribute("style","background-color: red;width:100px")// 樣式操作box.style.fontSize="50px"box.style.backgroundColor="red"http:// 默認屬性操作var img = document.getElementsByTagName('img')[0]console.log( img.getAttribute("src"))console.log(img.src)var p=document.getElementById("ppp")alert(p.innerText)var inp = document.getElementsByTagName('input')[0]alert(inp.getAttribute("value"))alert(inp.value)var p=document.getElementById("ppp")alert(ppp.name)</script></body></html>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>【原生JavaScript】

推薦閱讀