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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
javascript 模拟点击广告
Jan 02 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
原生js实现购物车功能
Sep 23 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 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
php关闭warning问题的解决方法
2016/05/17 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PDO::inTransaction讲解
2019/01/28 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Python subprocess模块学习总结
2014/03/13 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python绘制圆柱体的方法
2018/07/02 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
村干部承诺书
2014/03/28 职场文书
个人授权委托书范本
2014/04/03 职场文书
文明演讲稿范文
2014/05/12 职场文书
广告宣传策划方案
2014/05/21 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
银行员工考核评语
2014/12/31 职场文书
机关工会工作总结2015
2015/05/26 职场文书
迎新生晚会主持词
2015/06/30 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL