JavaScript中setAttribute用法介绍_基础知识

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
1、样式问题
setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号。
vName代表对样式赋值。
例如:

复制代码 代码如下:

var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss);

输出时:<input type="text" name="q" class="bordercss">,即,input控件具有bordercss样式属性
注意:class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。
使用setAttribute("class", vName)语句动态设置Element的class属性在firefox中是行的通的,但在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";
同样,firefox 也不认识"className"。所以常用的方法是二者兼备:

复制代码 代码如下:

element.setAttribute("class", value); //for firefox
element.setAttribute("className", value); //for IE

2、方法属性等问题
例如:

复制代码 代码如下:

var bar = document.getElementById("testbt");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");

这里利用setAttribute指定e的onclick属性,简单,很好理解。
但是IE不支持,IE并不是不支持setAttribute这个函数,而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。
为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。

复制代码 代码如下:

document.getElementById("testbt").className = "bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";
document.getElementById("testbt").style.color = "#00f";
document.getElementById("testbt").onclick= function () { alert("This is a test!"); }

时间: 2024-09-14 14:42:57

JavaScript中setAttribute用法介绍_基础知识的相关文章

Javascript中引用示例介绍_基础知识

在Javascript脚本中,参数的引用原则:引用的参数内部(如属性)可以修改,但参数对应的引用(reference)不能修改. 一个测试例子如下: 复制代码 代码如下: <script language="javascript"> //dosomething1,对于引用,变量本身不可以修改,但变量内部结构可以修改 function dosomething1(a){ a = 'try'; } //测试1 function test1(){ var a = {a:'test'

详解JavaScript中的异常处理方法_基础知识

 有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个语法错误,因为它缺少一个右括号: <script type="text/javascript"> <!-- window.print(; //--> </script> 当一个语法错误在JavaScript中出现,只有在同一个线程中包含的语法错误的影响

JavaScript中的this机制_基础知识

JavaScript有自己的一套this机制,在不同情况下,this的指向也不尽相同. 全局范围 console.log(this); //全局变量 全局范围使用this指向的是全局变量,浏览器环境下就是window. 注:ECMAScript5的strict模式不存在全局变量,这里的this是undefined. 函数调用中 function foo() { console.log(this); } foo(); //全局变量 函数调用中的this也指向全局变量. 注:ECMAScript5的

详解JavaScript中的every()方法_基础知识

 JavaScript 数组中的每个方法测试数组中的所有元素是否经过所提供的函数来实现测试.语法 array.every(callback[, thisObject]); 下面是参数的详细信息:     callback : 函数用来测试每个元素     thisObject : 对象作为该执行回调时使用 返回值: 返回true,如果此数组中的每个元素满足所提供的测试函数.兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需

JavaScript中setAttribute用法介绍

我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题   setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值. 1.样式问题 setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号. vName代表对样式赋值. 例如:

深入解读JavaScript中的Hoisting机制_基础知识

hoisting机制 javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看一段代码 var v = "hello"; (function(){ console.log(v); var v = "world"; })(); 这段代码运行的结果是什么呢? 答案是:undefined 这段代码说明了两个问题, 第一,function作用域里的变量v遮盖了上层作用域变量v.代码做少

深入理解JavaScript中的箭头函数_基础知识

从一开始箭头就是 JavaScript 的一部分,在第一个 JavaScript 中就建议将内联的脚本代码包裹在 HTML 的注释中,这可以防止那些不支持 JavaScript 的浏览器错误滴将你的代码显示为明文.你也许写过下面这样的代码: <script language="javascript"> <!-- document.bgColor = "brown"; // red // --> </script> <scri

JavaScript执行顺序详细介绍_基础知识

之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我们可以直观感觉到这种执行顺序,当然JavaScript代码的执行顺序是比较复杂的,所以在深入JavaScript语言之前也有必要对其进行剖析.1.1  按HTML文档流顺序执行JavaScript代码首先,读者应该清楚,H

探寻JavaScript中this指针指向_基础知识

探寻JavaScript中this指针指向 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题. 为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知