js动态生成层方法 不懂得加QQ 2270312758
我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性。比方说我们想要建立一个 div 层,则可以使用以下代码实现。
一.直接建立
function Button1_onclick() //直接采用代码建立一个DIV
{
var newElement = document.createElement('div');
var newText = document.createTextNode('这是新建立 div 中的文字。');
document.body.appendChild(newElement); //漏了这一句,否则行不通
newElement.id = 'newDiv';
newElement.className = 'newDivClass';
newElement.setAttribute('name ','newDivName');
newElement.style.width = '300px';
newElement.style.height = '200px';
newElement.style.margin = '0 auto';
newElement.style.border = '1px solid #DDD';
newElement.appendChild(newText);
}
二.把建立新对象写成一个通用方法,增加其通用性
createEl = function(t, a, y, x)//编写建立一个新对象的通用方法
{
var e = document.createElement(t);
document.body.appendChild(e); //漏了这一句,否则行不通
if (a) {
for (var k in a) {
if (k == 'class') e.className = a[k];
else if (k == 'id') e.id = a[k];
else e.setAttribute(k, a[k]);
}
}
if (y) { for (var k in y) e.style[k] = y[k]; }
if (x) { e.appendChild(document.createTextNode(x)); }
return e;
} //再通过以下方法来进行调用建立一个新层
function Button2_onclick() //先把建立一个新的DIV的方法写成一个通用方法,然后通过调用方法实例化建立DIV
{
var newElement = createEl('div',
{'class': 'newDivClass', id: 'newDiv', name: 'newDivName'},
{width: '300px', height:'200px', margin:'0 auto', border:'1px solid #DDD'},
'这是新建立div 中的文字。'); }
js动态生成层方法 不懂得加QQ 2270312758的更多相关文章
- js中let和var的区别 不懂得加QQ 2270312758
js中使用let定义变量的时候,是需要使用严格模式的,我看到网上有的博客说:如果在不使用严格模式的情况下,使用let会报错,但是在实验的过程中,我直接定义了let变量而且也没有使用严格模式,并没有报任 ...
- 简化document.createElement("div")动态生成层方法
我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性.比方说我们想要建立一個 div 层,则可以使用以下代码实现. 一.直接建立functi ...
- js 动态调用字符串方法并传入对应参数
在项目应用中,经常会需要根据业务数据需要动态去拼凑字符串,然后将字符串作为js代码进行执行. js提供eval()来支持.这里分享一个调用函数并传入需要参数的一个方法demo //动态调用自定义js方 ...
- js动态创建表格方法
window.onload = function(){ var table = document.createElement('table'); table.border = 1; table.wid ...
- js 动态添加元素(div、li、img等)及设置属性
把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...
- js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
- 使用jQuery动态加载js脚本文件的方法
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...
- (一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...
- js 动态加载事件的几种方法总结
本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...
随机推荐
- javaWeb使用POI操作Excel
1.为项目添加POI POI官网链接 点进去之后下载(上边的是编译好的类,下边的是源代码) 解压文件夹,把下面三个文件复制到WebComtent>WEB-INF>lib文件夹下 再把这三个 ...
- typeof和instansof的区别
typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.(typeof 运算符返回一个用来表示表达式的数据类型的字符串. ...
- Unix中的I/O模型
本文所指的I/O均是网络I/O. 一. POSIX对同步.异步I/O的定义 我们先大致看看POSIX对同步.异步的定义,不用细究,重点看我标红的部分就行. 同步I/O会导致请求进程阻塞,直到I/O操作 ...
- 如何做好技术Team Leader
背景 互联网公司的技术团队管理通常分为2个方向:技术管理和团队管理,互联网公司的技术TL与传统软件公司的PM还是有很大的区别,传统软件公司的PM更多注重于对项目的管理包括项目任务拆解.项目进度以及风险 ...
- Python档案袋(生成器、迭代器、队列 )
生成器: 简单的生成器实现: #生成器,将for循环的变量传递到前面的式子进行处理 #生成的并不是一个列表,而是一个存在算数规则的对象 #不能通过下标直接取值,必须一个一个从头到尾取 va=(i*2 ...
- Python函数小节
定义函数时,默认参数必须指向不变的对象 参数为可变对象时,正常调用的时候,结果没有问题,但是当使用默认参数的时候,结果就会和理想的有差距. In [78]: def add(L=[]): ...: L ...
- 【JVM虚拟机】(6)---深入理解Class中访问标志、类索引、父类索引、接口索引
JVM(6)访问标志,类索引 上一篇博客讲[JVM虚拟机](5)---深入理解JVM-Class中常量池 我们知道一个class文件正常可以分为7个部分: 魔数与class文件版本 常量池 访问标志 ...
- 3D数学 矩阵常用知识点整理
1.矩阵了解 1)矩阵的维度和记法 (先数多少行,再数多少列) 2)矩阵的转置 行变成列,第一行变成第一列...矩阵的转置的转置就是原矩阵 即 3)矩阵和标量的乘法 ...
- ifarme的自适应高度问题
Html: <iframe id="iframeid" src="/Home/DisplayiIndex"></iframe> JS部分 ...
- 抽象工厂模式(Abstract Factory Pattern)
抽象工厂模式概述 定义:提供一个创建一系列相关或相互依赖对象的接口,而无需指定他们具体的类 抽象工厂抽象工厂,顾名思义,就是比工厂模式更抽象的工厂模式.在工厂模式中,一个具体工厂只负责生产一个具体产品 ...