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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
js实现简单放大镜效果
Mar 07 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
10款实用的PHP开源工具
2015/10/23 PHP
arguments对象
2006/11/20 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
Python编程之Re模块下的函数介绍
2017/10/28 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
协议书怎么写
2014/04/21 职场文书
大足石刻导游词
2015/02/02 职场文书
运动会宣传稿50字
2015/07/23 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
MySQL七大JOIN的具体使用
2022/02/28 MySQL
Python Numpy库的超详细教程
2022/04/06 Python