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 对象成员的可见性说明
Oct 16 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
使用typescript改造koa开发框架的实现
Feb 04 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实现的比较完善的购物车类
2014/12/02 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
js监听键盘事件示例代码
2013/07/26 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
python 多进程通信模块的简单实现
2014/02/20 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
python实现自动清理重复文件
2020/08/24 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
药店主任岗位责任制
2014/02/10 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
实习证明格式范文
2014/10/14 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
典型事迹材料范文
2014/12/29 职场文书
违纪检讨书范文
2015/01/27 职场文书
机器人瓦力观后感
2015/06/12 职场文书
Python使用scapy模块发包收包
2021/05/07 Python