(一)js實現(xiàn)html節(jié)點、CSS樣式、事件的動態(tài)添加

①場景描述：我們需要動態(tài)獲取后臺數(shù)據(jù)并將這些數(shù)據(jù)以列表方式展示，其中列表存在自己的列表樣式，每個item都存在自己的點擊事件.....那么在這種情況下我們是不是就需要用到動態(tài)添加節(jié)點的模式去處理呢？

②代碼記錄如下：

$.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=' 未找到相關(guān)站點或線路';

}

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("網(wǎng)絡(luò)忙，請再次嘗試哦!");

}

});其中首先找到父節(jié)點mydiv ，然后采用 var divone = document.createElement("div")的方式創(chuàng)建新的節(jié)點(這里可以使div、span、a等各種)，同樣可以對新創(chuàng)建的節(jié)點添加新的css、點擊事件、id等，最后將這些新的節(jié)點元素一點點添加到父級元素即可完成動態(tài)元素的創(chuàng)建添加；

(二)html覆蓋層的添加

①需要在頁面引入一下html

//

//

//

//

//

//

//

//

//

//

進(jìn)行中，請稍后...

//

//

//

//

//

②加入對應(yīng)的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方法實現(xiàn)了對覆蓋層的展示和隱藏

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實現(xiàn)html節(jié)點、CSS樣式、事件的動態(tài)添加以及html覆蓋層的添加，方便自己查閱！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。