本文主要是介绍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("网络忙，请再次尝试哦!");}});（二）html覆盖层的添加
①需要在页面引入一下html
// <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"><img src="images/loading.gif">
// </td>
// </tr>
// <tr>
// <td valign="middle" align="center" style="text-shadow: 0 0 0">进行中，请稍后...</td>
// </tr>
// </table>
// </div>
// </div>
// </div>②加入对应的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覆盖层的添加，方便自己查阅,欢迎访问个人博客（http://cuiyongzhi.com）！
这篇关于js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
