javascript中setAttribute()函数使用方法及兼容性


Posted in Javascript onJuly 19, 2015

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

语法结构:

el.setAttribute(name,value)

参数列表:

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

代码实例:

<!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()函数会首先创建此属性,然后再给它赋值。

以上两个代码实例在各主流浏览器中都能够成功的执行,但这并不说明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非以上列举的属性仍然用原始属性名;最后这些特殊属性使用fixAttr,例如class。

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

<!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"这种形式进行兼容。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
JavaScript 事件系统
Jul 22 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
jQuery的position()方法详解
Jul 19 #Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 #Javascript
javascript中mouseover、mouseout使用详解
Jul 19 #Javascript
javascript实现的简单计时器
Jul 19 #Javascript
javascript中setInterval的用法
Jul 19 #Javascript
js中跨域方法原理详解
Jul 19 #Javascript
javascript获取网页宽高方法汇总
Jul 19 #Javascript
You might like
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python实现简单加密解密机制
2019/03/19 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
C#基础面试题
2016/10/17 面试题
servlet面试题
2012/08/20 面试题
旷课检讨书3000字
2014/02/04 职场文书
525心理活动总结
2014/07/04 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书