(一)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覆蓋層的添加，方便自己查閱！

總結

以上是生活随笔為你收集整理的js样式会覆盖html样式,js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。