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 API学Jquery之一 选择器
Apr 07 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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弱类型的安全问题详细总结
2016/09/25 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
jquery中动态效果小结
2010/12/16 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
使用Python的内建模块collections的教程
2015/04/28 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python 画函数曲线示例
2019/12/04 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
华为慧通笔试题
2016/04/22 面试题
高中军训感言400字
2014/02/24 职场文书
餐饮投资计划书
2014/04/25 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
服装店员工管理制度
2015/08/07 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书