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下:nth-child(an+b)的使用注意
May 28 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php实现短信发送代码
2015/07/05 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
使用Python pip怎么升级pip
2020/08/11 Python
Python常用外部指令执行代码实例
2020/11/05 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
国际经济贸易专业推荐信
2013/11/06 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
十八届三中全会感言
2014/03/10 职场文书
农村葬礼主持词
2014/03/31 职场文书
师德师风演讲稿
2014/05/05 职场文书
小学家长学校培训材料
2014/08/24 职场文书
七一讲话心得体会
2014/09/05 职场文书
施工安全员岗位职责
2015/04/11 职场文书
就业推荐表院系意见
2015/06/05 职场文书
小学运动会入场口号
2015/12/24 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
小数乘法教学反思
2016/02/22 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python