JavaScript 创建DIV 设置样式不起作用，很多都是因为设置样式的顺序问题

Posted 2022-04-04 rzqy

javascript 创建DIV 设置样式不起作用，很多都是因为设置样式的顺序问题，因为有的样式需要之前设置其他样式才能生效，推荐的样式排序如下：

insertDIV:function()

　　var divId=document.getElementById("divContainer");

　　if(divId)

　　　　divId.style.display="block";   //作用：一般这种需要设置退出时候就消失了，可以设置display为none隐藏，那么再添加时候不需要重新create，可以找到设置display为block就                                                                  行，这样就避免了，重复生成DIV

　　

　　else

　　　　var mainDiv=document.getElementById("main_div");   //创建新DIV时候先找到父DIV

　　　　childDiv=document.createElement("div");   //创建DIV

　　　　childDiv.id="divContainer" ;  //这个必须跟第一句代码中的id保持一致

　　　　childDiv.style.width="150px";

　　　　childDiv.style.height="250px";

　　　　childDiv.style.position="absolute";  //这个必须设置为absolute才能浮在上面显示，并且只能先设置宽高，再设置position

　　　　childDiv.style.bottom="10px";    //再设置显示位置，底部多少

　　　　childDiv.style.right="15px";   //设置显示位置，右侧多少

　　　　mainDiv.appendChild(childDiv);   //添加到父容器中