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 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
自己开发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
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
我为自己代言广告词
2014/03/18 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
考试后的感想
2015/08/07 职场文书