JavaScript动态创建DIV元素及样式设置详解

动态创建DIV元素与样式设置

首先参考原有的CSS样式定义。

.item{float:left;overflow:hidden;margin-left:8px;margin-top:10px;width: 320px; height:

250像素，背景不重复且指定图片路径为../images/bgred.jpg。

.curve类设置相对定位，宽度320像素，高度250像素，层级z-index为1，左侧偏移75像素，顶部偏移-40像素。

以下是动态创建DIV的具体代码实现。

循环条件为j从0开始，当j*8小于字符串长度时执行：

在名为displayFrame的iframe文档中创建div元素：var mydiv = window.frames["displayFrame"].document.createElement("div");

为该div设置ID属性，格式为itemdiv加上当前索引j：mydiv.setAttribute("id","itemdiv"+j);

设置左浮动样式，在IE中需使用styleFloat：mydiv.style.styleFloat="left";

设置溢出隐藏：mydiv.style.overflow="hidden";

设置左边距为8像素：mydiv.style.marginLeft="8px";

设置顶部边距为10像素：mydiv.style.marginTop="10px";

设置宽度为320像素：mydiv.style.width="320px";

设置高度为250像素：mydiv.style.height="250px";

设置背景不重复：mydiv.style.backgroundRepeat="no-repeat";

设置背景图片路径：mydiv.style.backgroundImage="url(image/bgred.jpg)"。

将创建好的mydiv元素添加到displayFrame的body中：window.frames["displayFrame"].document.body.appendChild(mydiv);

接着创建另一个名为curvediv的div元素：var curvediv =window.frames["displayFrame"].document.createElement("div");

为该元素设置ID，格式为curvediv加上索引j：curvediv.setAttribute("id","curvediv"+j);

设置定位方式为相对：curvediv.style.position="relative";

设置层级为1：curvediv.style.zIndex=1;

设置左侧位置为75像素：curvediv.style.left="75px";

设置顶部位置为-40像素：curvediv.style.top="-40px";

设置宽度为320像素：curvediv.style.width="320px";

设置高度为250像素：curvediv.style.height="250px";

将curvediv追加到ID为divitem加j的元素中（注：此处ID前缀与创建时不同，需注意一致性）：window.frames["displayFrame"].document.getElementById("divitem"+j).appendChild(curvediv);

完成上述步骤即可将div元素成功增加到HTML结构中。

除了直接添加到body，也可以在HTML中预先定义一个SPAN元素。

通过获取ID为spanId的元素，将mydiv追加进去：window.frames["displayFrame"].document.getElementById("spanId").appendChild(mydiv);

或者直接将mydiv追加到body中：window.frames["displayFrame"].document.body.appendChild(mydiv);

上述方法在IE和Firefox浏览器中均得到支持。

浏览器兼容性与CSS属性映射

另外需要注意CSS中浮动效果的设置细节。

CSS中浮动效果通常写为float:left。

在IE浏览器中，对应的JavaScript代码为：mydiv.style.styleFloat="left";

而在Firefox浏览器中，对应的代码为：mydiv.style.cssFloat="left";

其他类似CSS属性的处理也有特定规则。

在CSS编写中，边距通常写作margin-left:8px。

而在动态添加样式时，需要去掉连字符并采用驼峰命名法：mydiv.style.marginLeft="8px";

关于属性名大小写敏感的问题，此处未做深入研究。