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中的绑定与解绑函数应用示例
Jun 24 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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统计二维数组元素个数的方法
2013/11/12 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
JS实现简单打字测试
2020/06/24 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python 闭包的使用方法
2017/09/07 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python中的字符串内部换行方法
2018/07/19 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python导入库的具体方法
2020/06/18 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python