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 相关文章推荐
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
13个PHP函数超实用
Oct 21 Javascript
js密码强度校验
Nov 10 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 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项目的方法
2006/10/09 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
学习python (2)
2006/10/31 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python实现自动登录后台管理系统
2018/10/18 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python 项目目录结构设置
2020/02/14 Python
python实现在线翻译功能
2020/03/03 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
AJAX的全称是什么
2012/11/06 面试题
英语一分钟演讲稿
2014/04/29 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
简单租房协议书
2014/10/21 职场文书
助学金感谢信
2015/01/20 职场文书
费城故事观后感
2015/06/10 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书