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 相关文章推荐
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
jquery插件格式实例分析
Jun 16 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
node.js操作mysql简单实例
May 25 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 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实现rc4加密算法代码
2012/04/25 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
菜单效果
2006/10/14 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python list转dict示例分享
2014/01/28 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python连接mysql实例分享
2016/10/09 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python 字符串追加实例
2019/07/20 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
人事任命书范文
2014/06/04 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
会计实训报告范文
2014/11/04 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android