JS implements HTML nodes, CSS styles, dynamic additions to events, and HTML overlay additions

Source: Internet
Author: User

(a) JS implementation of HTML nodes, CSS style, the dynamic addition of events

① Scenario Description: We need to dynamically retrieve the background data and display it in a list, where the list has its own list style, and each item has its own click event .... So in this case, do we need to use the dynamic Add node mode to deal with it?

The ② code is logged as follows:

$.ajax ({url: "***.action", type: ' Post ', DataType: ' JSON ', ContentType: "application/x-www-form-urlencoded; Charset=utf-8 ", data: {' name ': Name, ' type ': type},success:function (data) {$ (" #lianxiang "). empty (); var mydiv = document . getElementById ("Lianxiang"); var arr = new Array (); arr = Data;if (arr.length==0) {document.getElementById (' Lianxiang ') . innerhtml= ' did not find the relevant site or line ';} if (Arr.length > 0) {for (var j = 0; J < Arr.length; J + +) {var arr_l = new Array (); arr_1 = Arr[j];var Divone = Docu Ment.createelement ("div"), if (j%2==0) {Divone.setattribute ("Class", "ui-block-a");} Else{divone.setattribute ("Class", "Ui-block-b");} var divtwo = document.createelement ("div");d ivtwo.setattribute ("Class", "bus_zp_list_more_01"); var aa = Document.createelement ("a"); Aa.setattribute ("href", "#"), var span = document.createelement ("span"); span.innerhtml = ARR_1[2];d ivtwo.id = J;aa.appendchild (span);d ivtwo.appendchild (aa);d ivone.appendchild (divtwo); Mydiv.appendchild ( Divone);d Ivtwo.onclick = function () {var idnum = $ (this). attr (' id '); ewohobustwo (Data[idnum][0], data[idnum][1],data[idnum][2], data[idnum][3]);};} },error:function () {alert ("Network busy, please try again Oh!");});
It first finds the parent node mydiv, and then uses var Divone = document.createelement ("div") to create a new node (here you can make Div, span, a, etc.), as well as add new CSS to the newly created node, Click the event, ID, etc., and finally add a little bit of these new node elements to the parent element to complete the creation of dynamic elements;

(ii) HTML overlay Additions

① need to introduce HTML to the page

<div class= "Dialogdiv" style= "Display:none;" >//<div class= "U-guodu-box" >//<div>//<table width= "100%" cellpadding= "0" cellspacing= "0" border= " 0 ">//<tr>//<td align=" center ">//</td>//</tr>// <TR>//<TD valign= "Middle" align= "center" style= "text-shadow:0 0 0" > in progress, please later ... </td>//</tr>// </table>//</div>//</div>//</div>

② Add the corresponding lodeing CSS

#BgDiv1 {background-color: #000; position:absolute; z-index:9999; display:none;left:0px; top:0px; width:100%; height:100%;opacity:0.6; Filter:alpha (opacity=60);}. dialogdiv{position:absolute;z-index:99999;}. u-user-login-btn{display:block; border:none; Background:url (images/bg_mb_btn1_1.png) repeat-x; font-size:1em; color : #efefef; line-height:49px; Cursor:pointer; height:53px; font-weight:bold;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; width:100%; box-shadow:0 1px 4px #cbcacf, 0 0 40px #cbcacf;} . U-user-login-btn:hover,. u-user-login-btn:active{display:block; border:none; Background:url (images/bg_mb_btn1_1_h.png) repeat-x; font-size : 1em; Color: #efefef; line-height:49px; Cursor:pointer; height:53px; font-weight:bold;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; width:100%; box-shadow:0 1px 4px #cbcacf, 0 0 40px #cbcacf;}.   u-user-login-btn2{Display:block; Border:none;background:url (images/bg_mb_btn1_1_h.png) repeat-x; font-size:1eM Color: #efefef; line-height:49px; Cursor:pointer; font-weight:bold;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; width:100%; box-shadow:0 1px 4px #cbcacf, 0 0 40px #cbcacf; height:53px;}.  U-guodu-box {padding:5px 15px; Background: #3c3c3f; Filter:alpha (opacity=90); -moz-opacity:0.9; -khtml-opacity:0.9;  opacity:0.9; min-heigh:200px; border-radius:10px;}. U-guodu-box div{color: #fff; line-height:20px; font-size:12px; margin:0px auto; height:100%; padding-top:10%; padding-bottom:10%;}

③ the following two JS methods to achieve the overlay of the display and hide

function Showlode () {$ ("#BgDiv1"). CSS ({display: "block", Height: $ (document). Height ()}); var yscroll = Document.documentelement.scrolltop;var Screenx = $ (window). Width (), var Screeny = $ (window). Height (); $ (". Dialogdiv "). CSS (" Display "," block "); $ (". Dialogdiv "). CSS (" top ", Yscroll +" px "), var dialogdiv_width = $ (". Dialogdiv "). Width (), var dialogdiv_height = $ (". Dialogdiv "). Height (); $ (". Dialogdiv "). CSS (" Left ", (SCREENX/2-DIALOGDIV_WIDTH/2) +" px "); $ (". Dialogdiv "). CSS (" Top ", (SCREENY/2-DIALOGDIV_HEIGHT/2) +" px "), $ (" body "). CSS (" Overflow "," hidden ");} function Hidelode () {$ ("#BgDiv1"). CSS ({display: "None", Height: $ (document). Height ()}); var yscroll = Document.documentelement.scrolltop;var Screenx = $ (window). Width (), var Screeny = $ (window). Height (); $ (". Dialogdiv "). CSS (" display "," none "); $ (". Dialogdiv "). CSS (" top ", Yscroll +" px "), var dialogdiv_width = $ (". Dialogdiv "). Width (), var dialogdiv_height = $ (". Dialogdiv "). Height (); $ (". Dialogdiv "). CSS (" Left ", (SCREENX/2-dialogdiv_width/2) + "px"); $ (". Dialogdiv "). CSS (" Top ", (SCREENY/2-DIALOGDIV_HEIGHT/2) +" px "), $ (" body "). CSS (" Overflow "," hidden ");}

The above basic record JS implementation of HTML nodes, CSS style, dynamic addition of events and HTML overlay Add, easy to check!

JS implements HTML nodes, CSS styles, dynamic additions to events, and HTML overlay additions

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.