Recently, I had nothing to worry about. By the way, I wrote a small demo to practice my hands, operate dom, and share it with me.
HTML:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> New Web Project </title>
<Style type = "text/css">
Body {margin: 0px; padding: 0px; font-family: "";}
A {text-decoration: none; color: #333 ;}
A: hover {color: #936 ;}
. Op {width: 100%; height: auto ;}
</Style>
</Head>
<Body>
<Div class = "op" id = "min"> </div>
<Div class = "on" id = "on">
<A href = "#"> Onclick1 </a>
<A href = "#"> Onclick2 </a>
</Div>
<Script type = "text/javascript" src = "index. js"> </script>
<Script type = "text/javascript">
Window. onload = function ()
{
Index.int ();
Index. setOpacity ("opmint", "10 ");
Index. OnclickAll ();
}
</Script>
</Body>
</Html>
JavaScript:
/**
* @ Author xiangwenwen
*/
Var index = {
// Initialization
Int: function (){
// Body height
Var body = document. body;
Var bodyHeight = body. scrollHeight;
// Onclick parent container
Var on = document. getElementById ("on ");
On. style. position = "relative ";
On. style. zIndex = "5 ";
// Status parent container
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 ";
// Transparent layer 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 ";
// Vertical center 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 ";
// Close button 1
Var a = document. createElement ("");
A. setAttribute ("href ","#");
A. setAttribute ("id", "close ");
Admint. appendChild ();
Var aclose = document. getElementById ("close ");
Aclose. innerHTML = "disabled ";
Aclose. onclick = function (){
Admint. style. display = "none ";
Min. style. display = "none ";
}
// Vertical center 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 ";
// Close button 2
Var a2 = document. createElement ("");
A2.setAttribute ("id", "a2close ");
A2.setAttribute ("href ","#");
Addiv2.appendChild (a2 );
Var a2close = document. getElementById ("a2close ");
A2close. innerHTML = "close ";
A2close. onclick = function (){
Addiv2.style. display = "none ";
Min. style. display = "none ";
}
},
// Transparent background
SetOpacity: function (node, level ){
Node = typeof node = "string "? Document. getElementById (node): node;
If (document. all ){
Node. style. filter = "alpha (opacity =" + level + ")";
} Else {
Node. style. opacity = level/100;
};
},
// Initialize the click status
OnclickAll: function (){
Var onmin = document. getElementById ("min ");
Var onck = document. getElementById ("on ");
Var adon = onck. getElementsByTagName ("");
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 ";
}
}
}
For addition, deletion, modification, and query of dom, the preceding code is changed by using two parameters: replaceChild (), one is the node to be inserted, and the other is the node to be replaced. This method is used to replace a node after deletion. If you do not want to replace the node, you only need to delete the node and directly use removeChild ().
Industry is superior to diligence, and it is not suitable for industry. Think about things and get rid of things. The growth of newcomers lies in summary. All articles and examples are self-summary only for learning and communication.
From dancing in Taipei