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 MD5加密实现代码
Mar 15 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
javascript RegExp 使用说明
May 21 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 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(1)--回到未来
2006/10/09 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
详解JS预解析原理
2020/06/16 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Python中那些 Pythonic的写法详解
2019/07/02 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
机电一体化毕业生求职信
2013/11/02 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
2014年营业员工作总结
2014/11/18 职场文书
五年级小学生评语
2014/12/26 职场文书
留学推荐信英文范文
2015/03/26 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
Pandas-DataFrame知识点汇总
2022/03/16 Python
python获取带有返回值的多线程
2022/05/02 Python