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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
jQuery DOM操作实例
Mar 05 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
理解javascript封装
Feb 23 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
vue增删改查的简单操作
Jul 15 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
JavaScript实现模态对话框实例
Jan 13 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中is_file()函数使用指南
2015/05/08 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python Requests安装与简单运用
2016/04/07 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python查看列的唯一值方法
2018/07/17 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python爬虫用mongodb的理由
2020/07/28 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
PHP面试题附答案
2015/11/28 面试题
小学教师学期末自我评价
2013/09/25 职场文书
公司培训欢迎词
2014/01/10 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
先进单位申报材料
2014/12/25 职场文书
运动与健康自我评价
2015/03/09 职场文书