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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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 url地址栏传中文乱码解决方法集合
2010/06/25 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php截取字符串函数分享
2015/02/02 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
laravel学习教程之存取器
2016/07/30 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
商务英语专业自荐信
2013/10/14 职场文书
参观考察邀请函范文
2014/01/29 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
物流专业自荐信
2014/05/23 职场文书
《法国号》教学反思
2016/02/22 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
MySQL数字类型自增的坑
2021/05/07 MySQL