search

Home >Web Front-end >JS Tutorial >How to use the setAttribute() function in javascript and its compatibility_javascript skills

How to use the setAttribute() function in javascript and its compatibility_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:49:371604browse

The setAttribute() function can set the attribute of the object. If this attribute does not exist, it will be created.

Grammar structure:

el.setAttribute(name,value)

Parameter list:

Parameter Description
name is required. Specifies the attribute name to be set.
value is required. Specifies the property value to be set.

Code example:

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

The above code can reset the id attribute value of the div and pop up the newly set id attribute value.
Example 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>

The above code can set the newAttr attribute value of the div and pop up this attribute value. What needs special attention here is that because div does not have the newAttr attribute by default, the setAttribute() function will first create this attribute and then assign a value to it.

The above two code examples can be successfully executed in all mainstream browsers, but this does not mean that the setAttribute() function is compatible with each browser.

Look at another code example: 

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

The above code can set the font size to 18px and the font color to red in standard browsers, but it does not take effect in IE6 and IE7 browsers.

However, you can still use mydiv.getAttribute("class") to get the attribute value "textcolor".

That is to say, in IE6 or IE7 browsers, the setAttribute() function can be used, but it is not effective for all attributes.

The following attributes have the above problems:

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

In order to solve the above problem, we need to write a universal cross-browser interface method for setting element attributes: 

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));
 }
}
})();

First of all, standard browsers directly use the original attribute names; secondly, IE6/7 attributes that are not listed above still use the original attribute names; finally, these special attributes use fixAttr, such as class.

Then the above code example can be modified into the following form:

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

The above code is valid in all major browsers, and can set the font size to 18px and the color to red.
As for the style attribute, you can use el.style.color="xxx" for compatibility.

The above is the entire content of this article, I hope you all like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Javascript implements web page shielding Backspace event, input box is not shielded_Basic knowledgeNext article：Javascript implements web page shielding Backspace event, input box is not shielded_Basic knowledge

Related articles

See more