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!"); }

(0)

相关推荐

  • JS中Attr的用法详解

    具体代码如下所示: <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //使用attr(name)获取属性值: alert(

  • javascript中setAttribute兼容性用法分析

    本文实例分析了javascript中setAttribute兼容性用法.分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX. 2:自定义属性建议使用node.getAttribute("XXXX"). 3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX"),如label中的for. 4:当获取的目标是保留字,如:class,请使用className代替. setAttribute(string name,

  • angularjs中ng-attr的用法详解

    前言 html中的属性很多,同样可以使用angularjs来定义: ng-attr-(suffix)=只能使用变量定义 <div title="angularjs中的title">title</div> <div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题--> <div ng-attr-title="'angular

  • JavaScript中setAttribute用法介绍

    setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值.1.样式问题setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号.vName代表对样式赋值.例如: 复制代码 代码如下: var input = document.createElement("input");input.setAttribut

  • 5分钟理解JavaScript中this用法分享

    前言关于JavaScript中this的用法网络中已经有较多比较详尽的介绍,可以参考本文的参考学习资料和网络.本文结合网络收集整理,尝试以一种简易的方式阐述JavaScript中this的用法,希望对大家关于JavaScript中this用法的快速理解有所帮助.正文1. this用法实例 复制代码 代码如下: window.color = "red"; var o = { color: "blue" }; function sayColor(){     alert

  • javascript中递归函数用法注意点

    不做详细文字说明了,直接写代码,很明了. <script> function sum(num){ if(num<=1){ return 1; }else{ return num*sum(num-1); //return num*arguments.callee(num-1); //指针 //return 2; } } var sum1=sum; alert(sum1(2)); </script> 上面的代码 在执行时很容易出现问题,执行我们介绍一个方法,arguments.c

  • javascript中attachEvent用法实例分析

    本文实例讲述了javascript中attachEvent用法.分享给大家供大家参考.具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1 obj.onclick=method2 obj.onclick=method3 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,

  • javascript中this用法实例详解

    本文实例讲述了javascript中this用法.分享给大家供大家参考,具体如下: JavaScript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式.函数有以下几种调用方式:作为对象方法调用.作为函数调用.作为构造函数调用.apply或call调用. 对象方法调用 作为对象方法调用的时候,this会被绑定到该对象. var point = { x : 0, y : 0, moveTo : function(x, y) { this.x = this

  • Javascript中Array用法实例分析

    本文实例讲述了Javascript中Array用法.分享给大家供大家参考.具体分析如下: JavaScript中的Array对象就是数组,首先是一个动态数组,而且是一个像C#.Java中"数组.List.HashMap/Dictionary"等的超强综合体. Array数组 使用方式: 例1: var citys = new Array(); //创建数组对象,无需初始化长度,动态 citys[0] = '上海'; citys[1] ='北京'; citys[2] = '深圳'; fo

  • JavaScript中return用法示例

    本文实例讲述了JavaScript中return用法.分享给大家供大家参考,具体如下: return可以接受函数中的返回值,前提是函数中要有return语句. 下面是一个应用小示例: <html> <head> <script type='text/javascript'> function linkPage(){ alert('You Clicked??'); return false; } </script> </head> <body

  • javascript中AJAX用法实例分析

    本文实例讲述了javascript中AJAX用法.分享给大家供大家参考.具体分析如下: 兼容地获得XMLHttpRequest对象: var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = window.XMLHttpRequest; }else if(window.ActiveXObject){ //IE浏览器 try{ //高版本,受msxml3.dll+支持 xhr = new ActiveXObject("Msxml2.XMLH

  • Javascript中arguments用法实例分析

    本文实例讲述了Javascript中arguments用法.分享给大家供大家参考.具体分析如下: 先来看如下示例: function add(n1,n2){ return n1+n2; } function add(n1,n2,n3) { return n1+n2+n3; } alert(add(1,2)); //NaN,js中调用方法采用就近原则: //而由于该方法没有传入n3,所以结果是NaN js中没有方法重载,怎么解决上面这个问题? //arguments function f1(){

随机推荐