JavaScript는 시스템 팝업 상자를 시뮬레이션하며 DOM 작동을 연습할 수 있습니다.-JS 튜토리얼-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 = { //初始ization 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"; //透ming层 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"; } //垂直居中div2 var div2 = document.createElement("div"); div2.setAttribute("id","addiv2 "); 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"; } }, //背景透明 setOpacity:function(node,level){ node = typeof 노드 == "문자열" ? document.getElementById(node) : node; if (document.all) { node.style.filter = "alpha(opacity ="+ level +")"; } else{ node.style.opacity = 레벨 / 100; }; }, //初始化点击状态 OnclickAll:function(){ var onmin = document.getElementBy 아이디( "min"); var onck = document.getElementById("on"); var adon = onck.getElementsByTagName("a"); var adclose = document.getElementById("admint"); var accclose = document.getElementById("addiv2"); adon[0].onclick = function(){ onmin.style.display = "block"; adclose.style.display = "block"; } adon[1].onclick = function(){ onmin.style.display = "block"; accclose.style.display = "block"; } } }

dom의 추가, 삭제, 수정 및 쿼리의 경우 위 코드에서는 변경 사항이 없습니다. 메소드는 두 개의 매개변수를 갖는 replacementChild()이며, 하나는 삽입할 노드이고, 다른 하나는 교체할 노드입니다. 이 메소드는 삭제 후 노드를 교체하는 데 사용됩니다. 교체를 원하지 않는 경우 노드를 삭제하고 직접 RemoveChild()를 사용하면 됩니다.

근면은 근면으로 이어지고, 낭비는 놀이에서 나옵니다. 행동은 생각에 의해 성취되고, 따르는 것에 의해 파괴됩니다. 새로운 사람들의 성장은 요약되어 있습니다. 모든 기사와 예제는 자기 요약일 뿐이며 학습 및 의사소통 목적으로만 사용됩니다.

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

JavaScript는 시스템 팝업 상자를 시뮬레이션하며 DOM 작동을 연습할 수 있습니다.