当前位置: 首页 > 编程笔记 >

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

严宇
2023-03-14
本文向大家介绍javascript中setAttribute()函数使用方法及兼容性,包括了javascript中setAttribute()函数使用方法及兼容性的使用技巧和注意事项,需要的朋友参考一下

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中setAttribute兼容性用法分析,包括了javascript中setAttribute兼容性用法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例分析了javascript中setAttribute兼容性用法。分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX。 2:自定义属性建议使用node.getAttribute("XXX

  • 问题内容: 我已经阅读了许多关于此的文章,但没有一个有任何明确的答案。这是我的代码: 现在,setAttribute()方法(带有mozilla注释)在mozilla中可以正常工作,但前提是该方法位于其上方的行之后。因此,换句话说,它似乎默认为最后设置的那个。.onclick方法(带有ie注释)在两种情况下均不起作用,我使用不正确吗? 无论哪种方式,我都找不到在IE中完全实现此功能的方式,更不用说

  • CodeIgniter 提供了一系列兼容性函数可以让你使用,它们只有在高版本的 PHP 中才有, 或者需要依赖其他的扩展才有。 由于是自己实现的,这些函数本身也可能有它自己的依赖性,但如果你的 PHP 中不提供这些函数时, 这些函数还是有用的。 注解 和 公共函数 一样,兼容性函数也一直可以访问,只要满足了他们的依赖条件。 密码哈希 依赖性 常量 函数参考 哈希(信息摘要) 依赖性 函数参考 多字

  • 本文向大家介绍jQuery Position方法使用和兼容性,包括了jQuery Position方法使用和兼容性的使用技巧和注意事项,需要的朋友参考一下 1、position方法 jquery api地址:http://jquery.cuishifeng.cn/position.html position方法获取匹配元素相对父元素的偏移。 2、说明 2.1 与offset()区别 .offset

  • 本文向大家介绍javascript中声明函数的方法及调用函数的返回值,包括了javascript中声明函数的方法及调用函数的返回值的使用技巧和注意事项,需要的朋友参考一下

  • 本文向大家介绍Python join()函数原理及使用方法,包括了Python join()函数原理及使用方法的使用技巧和注意事项,需要的朋友参考一下 函数:string.join() Python中有join()和os.path.join()两个函数,具体作用如下: join(): 连接字符串数组。将字符串、元组、列表中的元素以指定的字符(分隔符)连接生成一个新的字符串 os.path.join