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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 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实现弹出消息提示框的两种方法
2013/12/17 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
快速入门Vue
2016/12/19 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
python实现折半查找和归并排序算法
2017/04/14 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Python自省及反射原理实例详解
2020/07/06 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Python模块常用四种安装方式
2020/10/20 Python
国贸专业个人求职信分享
2013/12/04 职场文书
劳动模范事迹材料
2014/01/19 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
学校教师培训工作总结
2015/10/14 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
Python 语言实现六大查找算法
2021/06/30 Python
Linux中各个目录的作用与内容
2022/06/28 Servers