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

最近一段时间里，闲着无事，顺便写了个小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.

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

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