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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
JS代码编译器Monaco使用方法
Jun 11 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生成Flash动画的实现代码
2010/03/12 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python with的用法
2014/08/22 Python
python 循环while和for in简单实例
2016/08/16 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
传媒专业推荐信范文
2013/11/23 职场文书
医院工作检讨书范文
2014/02/10 职场文书
幼儿教师工作感言
2014/02/14 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS