JavaScript动态创建div属性和样式示例代码


Posted in Javascript onOctober 09, 2013

1.创建div元素:

Javascript代码

<scripttypescripttype="text/javascript"> 
functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
} 
</script> <scripttypescripttype="text/javascript"> 
functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
divFileitem.appendChild(divName); <!-- no "document" if not body--> 
} 
</script>

2.创建div的属性:

Javascript代码

<scripttypescripttype="text/javascript"> 
functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.title="thisisanewdiv."; 
createDiv.id="newDivId"; 
createDiv.class="newDivClass"; 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
} 
</script> <scripttypescripttype="text/javascript"> 
functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.title="thisisanewdiv."; 
createDiv.id="newDivId"; 
createDiv.class="newDivClass"; 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
<!--Directly use 2 CSS class styles--> 
createDiv.className = "name file_col"; 
} 
</script>

3.创建div的样式:

Javascript代码

<scripttypescripttype="text/javascript"> functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.style.background="pink"; 
createDiv.style.border="1pxsolidred"; 
createDiv.style.width="50px"; 
createDiv.style.height="50px"; 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
} 
</script>
Javascript 相关文章推荐
防止登录页面出现在frame中js代码
Jul 22 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 Javascript
javascript中的document.open()方法使用介绍
Oct 09 #Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 #Javascript
js onload事件不起作用示例分析
Oct 09 #Javascript
js 控制图片大小核心讲解
Oct 09 #Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 #Javascript
自己编写的类似JS的trim方法
Oct 09 #Javascript
jquery()函数的三种语法介绍
Oct 09 #Javascript
You might like
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python和ruby,我选谁?
2017/09/13 Python
Django入门使用示例
2017/12/12 Python
python ddt实现数据驱动
2018/03/14 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
导游的职业规划书范文
2013/12/27 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
ktv好的活动方案
2014/08/17 职场文书
迎七一演讲稿
2014/09/12 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫