您现在的位置： 365建站网 > 365文章 > JavaScript中setAttribute用法介绍

JavaScript中setAttribute用法介绍

文章来源：365jz.com     点击数：352    更新时间：2017-08-18 08:45   参与评论

setAttribute()函数可以设置对象的属性，如果不存在此属性，则会创建此属性。

语法结构:

el.setAttribute(name,value)

参数列表:

参数 描述
name 必需。规定要设置的属性名。
value 必需。规定要设置的属性值。

代码实例:

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=" utf-8"> 
  5. <script type="text/javascript"> 
  6. window.onload=function(){ 
  7.  var mydiv=document.getElementById("mydiv"); 
  8.  mydiv.setAttribute("id","newid"); 
  9.  alert(mydiv.getAttribute("id")); 
  10. } 
  11. </script> 
  12. </head> 
  13. <body> 
  14. <div id="mydiv"></div> 
  15. </body> 
  16. </html>

以上代码可以重新设置div的id属性值，并且弹出新设置的id属性值。
实例二:

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=" utf-8">
  5. <script type="text/javascript"> 
  6. window.onload=function(){ 
  7.  var mydiv=document.getElementById("mydiv"); 
  8.  mydiv.setAttribute("newAttr","attrValue"); 
  9.  alert(mydiv.getAttribute("newAttr")); 
  10. } 
  11. </script> 
  12. </head> 
  13. <body> 
  14.  <div id="mydiv"></div> 
  15. </body> 
  16. </html>

以上代码可以设置div的newAttr属性值，并且弹出此属性值。这里需要特别注意的是，因为div默认并不具有newAttr属性，这个时候setAttribute()函数会首先创建此属性，然后再给它赋值。

以上两个代码实例在各主流浏览器中都能够成功的执行，但这并不说明setAttribute()函数能够兼容各个浏览器。

再看一段代码实例:

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=" utf-8">
  5. <style type="text/css"> 
  6. .textcolor{ 
  7.  font-size:18px; 
  8.  color:red; 
  9. } 
  10. </style> 
  11. <script type="text/javascript"> 
  12. window.onload=function(){ 
  13.  var mydiv=document.getElementById("mydiv"); 
  14.  mydiv.setAttribute("class","textcolor"); 
  15. } 
  16. </script> 
  17. </head> 
  18. <body> 
  19.  <div id="mydiv"></div> 
  20. </body> 
  21. </html>

以上代码，在标准浏览器中能够将字体大小设置为18px，字体颜色设置为红色，但是在IE6和IE7浏览器中却不能够生效。

不过依然可以使用mydiv.getAttribute("class")获取属性值"textcolor"。

也就是说在IE6或者IE7浏览器中，setAttribute()函数可以使用，但是并不是对所有的属性都有效。

下面就列举一下存在上述问题的属性:

1.class

2.for

3.cellspacing

4.cellpadding

5.tabindex

6.readonly

7.maxlength

8.rowspan

9.colspan

10.usemap

11.frameborder

12.contenteditable

13.style

为了解决上述问题就要写一个通用的跨浏览器的设置元素属性的接口方法:

</>code
  1. dom=(function(){
  2. var fixAttr={
  3.  tabindex:'tabIndex',
  4.  readonly:'readOnly',
  5.  'for':'htmlFor',
  6.  'class':'className',
  7.   maxlength:'maxLength',
  8.   cellspacing:'cellSpacing',
  9.   cellpadding:'cellPadding',
  10.   rowspan:'rowSpan',
  11.   colspan:'colSpan',
  12.   usemap:'useMap',
  13.   frameborder:'frameBorder',
  14.   contenteditable:'contentEditable'
  15.  },
  16.     
  17.  div=document.createElement('div');
  18.  div.setAttribute('class','t');
  19.     
  20.  var supportSetAttr = div.className === 't';
  21.     
  22.  return {
  23.   setAttr:function(el, name, val){
  24.   el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
  25.   },
  26.   getAttr:function(el, name){
  27.   return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
  28.  }
  29. }
  30. })();

首先，标准浏览器直接使用原始属性名；其次，IE6/7非以上列举的属性仍然用原始属性名；最后这些特殊属性使用fixAttr，例如class。

那么上面的代码实例修改为以下形式即可:

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=" utf-8"> 
  5. <style type="text/css"> 
  6. .textcolor{ 
  7.  font-size:18px; 
  8.  color:red; 
  9. } 
  10. </style> 
  11. <script type="text/javascript"> 
  12. dom=(function(){ 
  13. var fixAttr={ 
  14.  tabindex:'tabIndex', 
  15.  readonly:'readOnly', 
  16.  'for':'htmlFor', 
  17.  'class':'className', 
  18.   maxlength:'maxLength', 
  19.   cellspacing:'cellSpacing', 
  20.   cellpadding:'cellPadding', 
  21.   rowspan:'rowSpan', 
  22.   colspan:'colSpan', 
  23.   usemap:'useMap', 
  24.   frameborder:'frameBorder', 
  25.   contenteditable:'contentEditable' 
  26.  }, 
  27.      
  28.  div=document.createElement('div'); 
  29.  div.setAttribute('class','t'); 
  30.      
  31.  var supportSetAttr = div.className === 't'; 
  32.      
  33.  return { 
  34.   setAttr:function(el, name, val){ 
  35.   el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val); 
  36.   }, 
  37.   getAttr:function(el, name){ 
  38.   return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name)); 
  39.  } 
  40. } 
  41. })(); 
  42. window.onload=function(){ 
  43.  var mydiv=document.getElementById("mydiv"); 
  44.  dom.setAttr(mydiv, 'class', 'textcolor'); 
  45. } 
  46. </script> 
  47. </head> 
  48. <body> 
  49. </body> 
  50. </html>

以上代码可以在各主流浏览器中都有效，都可以将字体大小设置为18px，颜色设置为红色。
至于style属性可以使用el.style.color="xxx"这种形式进行兼容。

setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
1、样式问题
setAttribute("class", value)中class是指改变"class"这个属性，所以要带引号。
vName代表对样式赋值。
例如:
</>code
  1. var input = document.createElement("input");
  2. input.setAttribute("type", "text");
  3. input.setAttribute("name", "q");
  4. 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"。所以常用的方法是二者兼备：
</>code
  1. element.setAttribute("class", value); //for firefox
  2. element.setAttribute("className", value); //for IE

2、方法属性等问题
例如：
</>code
  1. var bar = document.getElementById("testbt");
  2. bar.setAttribute("onclick", "javascript:alert('This is a test!');");

这里利用setAttribute指定e的onclick属性，简单，很好理解。
但是IE不支持，IE并不是不支持setAttribute这个函数，而是不支持用setAttribute设置某些属性，例如对象属性、集合属性、事件属性，也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。
为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性。
</>code
  1. document.getElementById("testbt").className = "bordercss";
  2. document.getElementById("testbt").style.cssText = "color: #00f;";
  3. document.getElementById("testbt").style.color = "#00f";
  4. document.getElementById("testbt").onclick= function () { alert("This is a test!"); }

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (352人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号