Js动态创建div


Posted in Javascript onSeptember 25, 2008

这是原来的CSS样式
.item{float:left;overflow:hidden;margin-left:8px;margin-top:10px;width: 320px; height:
250px;background-repeat: no-repeat; background-image:url(../images/bgred.jpg)}
.curve{position:relative;width:320px; height:250px; z-index:1; left: 75px; top: -40px;}
动态创建DIV代码如下:
for(j = 0;j*8 <str.length; j++)
{
var mydiv = window.frames["displayFrame"].document.createElement("div");
mydiv.setAttribute("id","itemdiv"+j);
mydiv.style.styleFloat="left";
mydiv.style.overflow="hidden";
mydiv.style.marginLeft="8px";
mydiv.style.marginTop="10px";
mydiv.style.width="320px";
mydiv.style.height="250px";
mydiv.style.backgroundRepeat="no-repeat";
mydiv.style.backgroundImage="url(image/bgred.jpg)"
window.frames["displayFrame"].document.body.appendChild(mydiv);
var curvediv =window.frames["displayFrame"].document.createElement("div");
curvediv.setAttribute("id","curvediv"+j);
curvediv.style.position="relative";
curvediv.style.zIndex=1;
curvediv.style.left="75px";
curvediv.style.top="-40px";
curvediv.style.width="320px";
curvediv.style.height="250px";
window.frames["displayFrame"].document.getElementById("divitem"+j).appendChild(curvediv);
}
把div元素增加到HTML里面.
也可在HTML里面定义一个SPAN
window.frames["displayFrame"].document.getElementById("spanId").appendChild(mydiv);
window.frames["displayFrame"].document.body.appendChild(mydiv);
IE和Firefox都支持.
另外需要注意的是这个CSS元素
浮动效果:float:left
在IE下代码为:mydiv.style.styleFloat="left";
在Firefox代码为: mydiv.style.cssFloat="left";
其他的诸如这种元素:
在CSS编写中一般是:margin-left:8px
而在动态增加需要去掉- :mydiv.style.marginLeft="8px";
关于大小写敏感问题没有仔细研究.

Javascript 相关文章推荐
Jquery获取和修改img的src值的方法
Feb 17 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
vue首次渲染全过程
Apr 21 Vue.js
自己开发Dojo的建议框架
Sep 24 #Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 #Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 #Javascript
javascript各种复制代码收集
Sep 20 #Javascript
javascript下IE与FF兼容函数收集
Sep 17 #Javascript
各种效果的jquery ui(接口)介绍
Sep 17 #Javascript
Prototype中dom对象方法汇总
Sep 17 #Javascript
You might like
codeigniter数据库操作函数汇总
2014/06/12 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
JavaScript 乱码问题
2009/08/06 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
类和结构的区别
2012/08/15 面试题
幼教求职信
2014/03/12 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
公司节能减排倡议书
2014/05/14 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
工厂无线对讲系统解决方案
2022/02/18 无线电