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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
Angular短信模板校验代码
Sep 23 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
Ajax实现异步加载数据
Nov 17 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
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
Angular排序实例详解
2017/06/28 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python中dict和set的用法讲解
2019/03/28 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
什么是View State?
2013/01/27 面试题
资深生产主管自我评价
2013/09/22 职场文书
机电一体化自荐信
2013/12/10 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
企业文化口号
2014/06/12 职场文书
品质口号大全
2014/06/17 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android