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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
js prototype截取字符串函数
Apr 01 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
js实现简单的倒计时
Jan 28 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安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP分页类集锦
2014/11/18 PHP
php cli配置文件问题分析
2015/10/15 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
党员承诺书怎么写
2014/05/20 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
Python字符串的转义字符
2022/04/07 Python