JavaScript simuliert System-Popup-Boxen, und Sie können nebenbei die Bedienung von DOM üben.

最近一段时间里，闲着无事，顺便写了个小demo练了练手，来操作dom，分享之。 HTML： "http://www.w3.org/TR/html4/loose.dtd"> New Web Project body{margin: 0px;padding: 0px;font-family: "微软雅黑";} a{text-decoration: none;color: #333; } a:hover{color: #936;} .op{width: 100%;height: auto;} window.onload = function() { index.int(); index.setOpacity("opmint","10"); . index.OnclickAll(); } JavaScript: /** * @author xiangwenwen */ var index = { //初始化 int:function(){ //body高 var body = document.body; var bodyHeight = body.scrollHeight; //onclick父容器 var on = document.getElementById("on"); on.style.position = "relative"; on.style.zIndex = "5"; //状态父容器 var min = document.getElementById("min"); min.style.display = "none"; min.style.position = "absolute"; min.style.zIndex = "10" ; min.style.height = bodyHeight + "px"; min.style.display = "none"; //透明层 www.2cto.com var dodiv = document.createElement ("div"); dodiv.setAttribute("id", "opmint"); min.appendChild(dodiv); var opmint = document.getElementById("opmint"); opmint.style.height = bodyHeight + "px"; opmint.style.width = "100%"; opmint.style.background = "#000"; //垂直居中div1 var div = document.createElement("div"); div.setAttribute("id","admint"); min.appendChild(div); var admint = document.getElementById(" admint"); admint.style.position = "absolute"; admint.style.width = "300px"; admint.style.height = "50px"; admint.style. border = "4px solid #963"; admint.style.top = "50%"; admint.style.left = "50%"; admint.style.marginTop = "-25px" ; admint.style.marginRight = "0px"; admint.style.marginBottom = "0px"; admint.style.marginLeft = "-150px"; admint.style.display = "none"; //关闭按钮1 var a = document.createElement("a"); a.setAttribute("href","#"); a.setAttribute( "id","close"); admint.appendChild(a); var aclose = document.getElementById("close"); aclose.innerHTML = "关闭"; aclose.onclick = function(){ admint.style.display = "none"; min.style.display = "none"; "); min.insertBefore(div2,min.childNodes[2]); var addiv2 = document.getElementById("addiv2"); addiv2.style.position = "absolute"; addiv2.style.width = "300px"; addiv2.style.height = "50px"; addiv2.style.border = "4px solid #789"; addiv2.style.top = " 50 %"; addiv2.style.left = "50 %"; addiv2.style.marginTop = "-25px"; addiv2.style.marginRight = "0px"; addiv2. style.marginBottom = "0px"; addiv2.style.marginLeft = "-150px"; addiv2.style.display = "none"; //关闭按钮2 var a2 = document .createElement("a"); a2.setAttribute("id","a2close"); a2.setAttribute("href","#"); addiv2.appendChild(a2); var a2close = document.getElementById("a2close"); a2close.innerHTML = "关闭"; a2close.onclick = function(){ addiv2.style.display = "none"; min.style.display = "none"; Art von Knoten == "Zeichenfolge" ? document.getElementById(node) : node; if (document.all) { node.style.filter = "alpha(opacity ="+ level +")"; } else{ node.style.opacity = level / 100; }; }, //初始化点击状态 OnclickAll:function(){ var onmin =. document.getElementBy ID( "min"); var onck = document.getElementById("on"); var adon = onck.getElementsByTagName("a"); var adclose = document.getElementById("admint"); var acclose = document.getElementById("addiv2"); adon[0].onclick = function(){ onmin.style.display = "block"; adclose.style.display = "block"; } adon[1].onclick = function(){ onmin.style.display = "block"; acclose.style.display = "block"; } } }

Für das Hinzufügen, Löschen, Ändern und Abfragen von dom gibt es keine Änderung im obigen Code. Die Methode ist replaceChild() mit zwei Parametern, einer ist der einzufügende Knoten. und der andere ist der zu ersetzende Knoten. Diese Methode wird verwendet, um einen Knoten nach dem Löschen zu ersetzen. Wenn Sie ihn nicht ersetzen möchten, müssen Sie ihn nur löschen und „removeChild()“ direkt verwenden.

Fleiß führt zu Fleiß, Verschwendung entsteht beim Spielen. Handlungen werden durch Denken erreicht, durch Befolgen zerstört. Das Wachstum neuer Menschen liegt in der Zusammenfassung. Alle Artikel und Beispiele sind lediglich Selbstzusammenfassungen und dienen ausschließlich Lern- und Kommunikationszwecken.