JavaScript setAttribute() 函数用法及 IE6/IE7 兼容性问题详解

作者：木棉时间：2026-10-29 12:33:32浏览：108

本文详细介绍 JavaScript 中 setAttribute() 函数的基本语法与使用场景，重点分析其在 IE6 和 IE7 浏览器中对 class、style 等特殊属性的兼容性问题，并提供通用的跨浏览器属性设置接口实现方案。

setAttribute() 函数基本用法

setAttribute() 函数用于设置 DOM 元素的指定属性，若该属性尚不存在，则会自动创建该属性。

其基本语法结构如下所示。

el.setAttribute(name, value)

该函数包含两个必需参数，具体描述如下。

参数说明： name：必需。指定要设置的属性名称。 value：必需。指定要设置的属性值。

以下代码实例演示了如何修改 div 元素的 id 属性，并获取新设置的 id 值进行弹窗提示。


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8"> 
<script type="text/javascript"> 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 mydiv.setAttribute("id","newid"); 
 alert(mydiv.getAttribute("id")); 
} 
</script> 
</head> 
<body> 
<div id="mydiv"></div> 
</body> 
</html>

上述代码成功重新设置了 div 的 id 属性，并弹出了更新后的 id 值。第二个实例如下。


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script type="text/javascript"> 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 mydiv.setAttribute("newAttr","attrValue"); 
 alert(mydiv.getAttribute("newAttr")); 
} 
</script> 
</head> 
<body> 
 <div id="mydiv"></div> 
</body> 
</html>

此代码设置了 div 的自定义属性 newAttr，并弹出其值。需特别注意，由于 div 默认不具备 newAttr 属性，setAttribute() 会先创建该属性，随后再赋值。

IE6/IE7 兼容性问题

尽管上述两个实例在主流现代浏览器中均能正常运行，但这并不意味着 setAttribute() 在所有浏览器中都完全兼容。

观察以下代码实例。


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css"> 
.textcolor{ 
 font-size:18px; 
 color:red; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 mydiv.setAttribute("class","textcolor"); 
} 
</script> 
</head> 
<body> 
 <div id="mydiv"></div> 
</body> 
</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

跨浏览器解决方案

为解决上述兼容性问题，需要编写一个通用的、跨浏览器的元素属性设置接口方法。


dom=(function(){
var fixAttr={
 tabindex:'tabIndex',
 readonly:'readOnly',
 'for':'htmlFor',
 'class':'className',
  maxlength:'maxLength',
  cellspacing:'cellSpacing',
  cellpadding:'cellPadding',
  rowspan:'rowSpan',
  colspan:'colSpan',
  usemap:'useMap',
  frameborder:'frameBorder',
  contenteditable:'contentEditable'
 },
    
 div=document.createElement('div');
 div.setAttribute('class','t');
    
 var supportSetAttr = div.className === 't';
    
 return {
  setAttr:function(el, name, val){
  el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
  },
  getAttr:function(el, name){
  return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
 }
}
})();

该方法的逻辑为：首先，在标准浏览器中直接使用原始属性名；其次，在 IE6/7 中，对于未列入特殊列表的属性仍使用原始属性名；最后，针对上述特殊属性（如 class），使用 fixAttr 映射后的名称（例如 className）。

基于此逻辑，前文的代码实例可修改为以下形式。


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8"> 
<style type="text/css"> 
.textcolor{ 
 font-size:18px; 
 color:red; 
} 
</style> 
<script type="text/javascript"> 
dom=(function(){ 
var fixAttr={ 
 tabindex:'tabIndex', 
 readonly:'readOnly', 
 'for':'htmlFor', 
 'class':'className', 
  maxlength:'maxLength', 
  cellspacing:'cellSpacing', 
  cellpadding:'cellPadding', 
  rowspan:'rowSpan', 
  colspan:'colSpan', 
  usemap:'useMap', 
  frameborder:'frameBorder', 
  contenteditable:'contentEditable' 
 }, 
     
 div=document.createElement('div'); 
 div.setAttribute('class','t'); 
     
 var supportSetAttr = div.className === 't'; 
     
 return { 
  setAttr:function(el, name, val){ 
  el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val); 
  }, 
  getAttr:function(el, name){ 
  return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name)); 
 } 
} 
})(); 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 dom.setAttr(mydiv, 'class', 'textcolor'); 
} 
</script> 
</head> 
<body> 
</body> 
</html>

修改后的代码可在各主流浏览器中正常生效，成功将字体大小设为 18px，颜色设为红色。此外，对于 style 属性，也可采用 el.style.color="xxx" 这种直接操作样式对象的方式进行兼容处理。

以上内容即为本文的全部讲解，希望对大家有所帮助。

作者最新文章

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01

为什么JS中typeof []返回object：数组类型检测误区解析

2026-11-04 19:50:47