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 相关文章推荐
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php 分页函数multi() discuz
2009/06/21 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
php简单日历函数
2015/10/28 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
理解python中生成器用法
2017/12/20 Python
Django之模型层多表操作的实现
2019/01/08 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
鼓励运动员的广播稿
2014/02/08 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
同事打架检讨书
2015/05/06 职场文书
2015年共青团工作总结
2015/05/15 职场文书
小学生读书笔记范文
2015/06/30 职场文书