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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 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
PHP4引用文件语句的对比
2006/10/09 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
php如何连接sql server
2015/10/16 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
用jscript实现新建word文档
2007/06/15 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
代码讲解Python对Windows服务进行监控
2018/02/11 Python
简单了解Python生成器是什么
2019/07/02 Python
python环境下安装opencv库的方法
2020/03/05 Python
如何在Shell脚本中使用函数
2015/09/06 面试题
期中考试后的反思
2014/02/08 职场文书
媒体宣传策划方案
2014/05/25 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
十八大宣传标语
2014/10/09 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
初婚未育证明样本
2015/06/18 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js