Comment utiliser la fonction setAttribute() en javascript et ses compétences de compatibilité

Comment utiliser la fonction setAttribute() en javascript et ses compétences de compatibilité_javascript

WBOY

Libérer： 2016-05-16 15:49:37

original

1620 Les gens l'ont consulté

La fonction setAttribute() peut définir l'attribut de l'objet. Si cet attribut n'existe pas, il sera créé.

Structure grammaticale :

el.setAttribute(nom, valeur)

Liste des paramètres :

Description du paramètre
le nom est requis. Spécifie le nom de l'attribut à définir.
la valeur est requise. Spécifie la valeur de propriété à définir.

Exemple de code :

<!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>

Copier après la connexion

Le code ci-dessus peut réinitialiser la valeur de l'attribut id du div et afficher la valeur de l'attribut id nouvellement définie.
Exemple 2 :

<!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>

Copier après la connexion

Le code ci-dessus peut définir la valeur de l'attribut newAttr du div et afficher cette valeur d'attribut. Ce qui nécessite une attention particulière ici, c'est que, comme div n'a pas l'attribut newAttr par défaut, la fonction setAttribute() créera d'abord cet attribut, puis lui attribuera une valeur.

Les deux exemples de code ci-dessus peuvent être exécutés avec succès dans tous les navigateurs grand public, mais cela ne signifie pas que la fonction setAttribute() est compatible avec chaque navigateur.

Regardez un autre exemple de code :

<!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>

Copier après la connexion

Le code ci-dessus peut définir la taille de la police sur 18 px et la couleur de la police sur rouge dans les navigateurs standard, mais il ne prend pas effet dans les navigateurs IE6 et IE7.

Cependant, vous pouvez toujours utiliser mydiv.getAttribute("class") pour obtenir la valeur de l'attribut "textcolor".

C'est-à-dire que dans les navigateurs IE6 ou IE7, la fonction setAttribute() peut être utilisée, mais elle n'est pas efficace pour tous les attributs.

Les attributs suivants présentent les problèmes ci-dessus :

1.classe

2.pour

3.espacement des cellules

4.cellpadding

5.tabindex

6.lecture seule

7.maxlength

8.rowspan

9.colspan

10.usemap

11.frameborder

12.contenteditable

13.style

Afin de résoudre le problème ci-dessus, nous devons écrire une méthode d'interface universelle entre navigateurs pour définir les attributs des éléments :

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 &#63; name : (fixAttr[name] || name), val);
  },
  getAttr:function(el, name){
  return el.getAttribute(supportSetAttr &#63; name : (fixAttr[name] || name));
 }
}
})();

Copier après la connexion

Tout d'abord, les navigateurs standards utilisent directement les noms d'attributs d'origine ; deuxièmement, les attributs IE6/7 qui ne sont pas répertoriés ci-dessus utilisent toujours les noms d'attributs d'origine ; enfin, ces attributs spéciaux utilisent fixAttr, comme class.

Ensuite, l'exemple de code ci-dessus peut être modifié sous la forme suivante :

<!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 &#63; name : (fixAttr[name] || name), val); 
  }, 
  getAttr:function(el, name){ 
  return el.getAttribute(supportSetAttr &#63; name : (fixAttr[name] || name)); 
 } 
} 
})(); 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 dom.setAttr(mydiv, 'class', 'textcolor'); 
} 
</script> 
</head> 
<body> 
</body> 
</html>

Copier après la connexion

Le code ci-dessus est valide dans tous les principaux navigateurs et peut définir la taille de la police sur 18 pixels et la couleur sur rouge.
Quant à l'attribut style, vous pouvez utiliser el.style.color="xxx" pour des raisons de compatibilité.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.