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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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内存不够用的快速解决方法
2013/10/26 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jQuery参数列表集合
2011/04/06 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
django 修改server端口号的方法
2018/05/14 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
教师一岗双责责任书
2014/04/16 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
思想品德评语大全
2014/12/31 职场文书
诚实守信主题班会
2015/08/13 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python