js實現html節點、CSS樣式、事件的動態添加以及html覆蓋層的添加

js實現html節點、CSS樣式、事件的動態添加以及html覆蓋層的添加

（一）js實現html節點、CSS樣式、事件的動態添加

①情境描述：我們需要動態擷取後台資料並將這些資料以列表方式展示，其中列表存在自己的列表樣式，每個item都存在自己的點擊事件.....那麼在這種情況下我們是不是就需要用到動態添加節點的模式去處理呢？

②代碼記錄如下：

$.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='  未找到相關網站或線路';}if (arr.length > 0) {for ( var j = 0; j < arr.length; j++) {var arr_l = new Array();arr_1 = arr[j];var divone = document.createElement(div);if(j%2==0){divone.setAttribute(class,ui-block-a);}else{divone.setAttribute(class,ui-block-b);}var divtwo = document.createElement(div);divtwo.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];divtwo.id = j;aa.appendChild(span);divtwo.appendChild(aa);divone.appendChild(divtwo);mydiv.appendChild(divone);divtwo.onclick = function() {var idnum = $(this).attr('id');ewohobustwo(data[idnum][0], data[idnum][1],data[idnum][2], data[idnum][3]);};}} },error : function() {alert(網路忙，請再次嘗試哦!);}});

其中首先找到父節點mydiv ，然後採用 var divone = document.createElement(div)的方式建立新的節點（這裡可以使div、span、a等各種），同樣可以對新建立的節點添加新的css、點擊事件、id等，最後將這些新的節點元素一點點添加到父級元素即可完成動態元素的建立添加；

（二）html覆蓋層的添加

 

①需要在頁面引入一下html

 

//

////// // // // // // // //

//

進行中，請稍後...

//////
②加入對應的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%;}

③下面兩個js方法實現了對覆蓋層的展示和隱藏

 

 

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);}

以上基本記錄了js實現html節點、CSS樣式、事件的動態添加以及html覆蓋層的添加，方便自己查閱！