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

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);   //添加到父容器中

  }

}

原文地址:https://www.cnblogs.com/rzqy/p/11169119.html

时间: 2024-10-14 04:15:08

JavaScript 创建DIV 设置样式不起作用,很多都是因为设置样式的顺序问题的相关文章

javascript 创建 div

纯JAVASCRIPPT创建 (1):document.getElementById("要创建DIV位置的ID").innerHTML='<div>div里面的内容</div>'; (2): var createDiv=document.createElement("div");  createDiv.title="div title.";  createDiv.id="id";  createDiv.

Javascript动态创建div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

前端学习代码实例-JavaScript动态创建div并写入文本

介绍一下如何利用JavaScript动态创建div元素,然后在其中写入文本. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习扣qun:731771211

关于内层DIV设置margin-top不起作用的解决方案

关于内层DIV设置margin-top不起作用的解决方案 (一) 近日在做另外一个站点的时候,又遇到这个问题,决定好好的研究解决一下. 代码如下: <div>上部层</div> <div> <!--父层-->     <div style="margin-top:200px;">子层</div></div> 理想中的效果是父层和上部层贴边显示,子层距离父层顶部有200px的距离,在ie中正常,但是在ff

《转》关于内层DIV设置margin-top不起作用的解决方案

关于内层DIV设置margin-top不起作用的解决方案 (一) 近日在做另外一个站点的时候,又遇到这个问题,决定好好的研究解决一下. 代码如下: <div>上部层</div> <div> <!--父层-->     <div style="margin-top:200px;">子层</div></div> 理想中的效果是父层和上部层贴边显示,子层距离父层顶部有200px的距离,在ie中正常,但是在ff

CSS---关于内层DIV设置margin-top不起作用的解决方案

关于内层DIV设置margin-top不起作用的解决方案 代码如下: <div>上部层</div> <div> <!--父层-->     <div style="margin-top:200px;">子层</div></div> 理想中的效果是父层和上部层贴边显示,子层距离父层顶部有200px的距离,在ie中正常,但是在ff中却出现问题,子层和父层贴边了,而父层和上部层却间隔了200px. 百思不得其

button设置hover-class样式不起作用

微信小程序的button中,可以指定按下去的类名,例如: 1 <button hover-class="hover">同意</button> 根据官方开发指南,在本地调试时,发现button设置hover-class样式不起作用: 1 /*page.wxss */ 2 3 .hover{ 4 background-color: red; 5 } 6 7 8 9 <!--page.wxml --> 10 <button type="de

javascript创建css、js,onload触发callback兼容主流浏览器的实现

http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.css后是否触发onload事件做了个测试.当然,为了兼容,首先要考虑的是会用到onload和onreadystatechange,但他们并不是万能的.加载js文件onload触发callback不算大问题.css比较特殊,因为Webkeit/FF下加载css不会触发onload事件.所以研究了一晚上

JavaScript创建节点

1.JavaScript创建节点 createElement();注:创建元素节点. 例如: var v = document.createElement("p"); createTextNode();注:创建文本节点. 例如: var v = document.createTextNode("大家好"); 2.js节点操作 appendChild();注:给当前节点添加一个子节点 var p = document.createElement("p&quo