Rumah > Artikel > hujung hadapan web > Cara menggunakan fungsi setAttribute() dalam javascript dan kemahiran compatibility_javascriptnya

Cara menggunakan fungsi setAttribute() dalam javascript dan kemahiran compatibility_javascriptnya

WBOYasal: 2016-05-16 15:49:371544semak imbas

Fungsi setAttribute() boleh menetapkan atribut objek Jika atribut ini tidak wujud, ia akan dicipta.

Struktur tatabahasa:

el.setAttribute(nama,nilai)

Senarai parameter:

Penerangan Parameter
nama diperlukan. Menentukan nama atribut untuk ditetapkan.
nilai diperlukan. Menentukan nilai harta yang akan ditetapkan.

Contoh kod:

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

Kod di atas boleh menetapkan semula nilai atribut id div dan muncul nilai atribut id yang baru ditetapkan.
Contoh 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>

Kod di atas boleh menetapkan nilai atribut newAttr div dan muncul nilai atribut ini. Apa yang memerlukan perhatian khusus di sini ialah kerana div tidak mempunyai atribut newAttr secara lalai, fungsi setAttribute() akan mula-mula mencipta atribut ini dan kemudian memberikan nilai kepadanya.

Dua contoh kod di atas boleh berjaya dilaksanakan dalam semua penyemak imbas arus perdana, tetapi ini tidak bermakna fungsi setAttribute() serasi dengan setiap penyemak imbas.

Lihat contoh kod lain:

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

Kod di atas boleh menetapkan saiz fon kepada 18px dan warna fon kepada merah dalam pelayar standard, tetapi ia tidak berkuat kuasa dalam pelayar IE6 dan IE7.

Walau bagaimanapun, anda masih boleh menggunakan mydiv.getAttribute("class") untuk mendapatkan nilai atribut "textcolor".

Maksudnya, dalam pelayar IE6 atau IE7, fungsi setAttribute() boleh digunakan, tetapi ia tidak berkesan untuk semua atribut.

Atribut berikut mempunyai masalah di atas:

1.kelas

2.untuk

3.jarak sel

4.cellpadding

5.tabindex

6.baca sahaja

7.panjang maksimum

8.jalur baris

9.colspan

10.usemap

11.sempadan rangka

12.contenteditable

13.gaya

Untuk menyelesaikan masalah di atas, kita perlu menulis kaedah antara muka penyemak imbas sejagat untuk menetapkan atribut elemen:

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

Pertama sekali, penyemak imbas standard secara langsung menggunakan nama atribut asal; kedua, atribut IE6/7 yang tidak disenaraikan di atas masih menggunakan nama atribut asal, akhirnya, atribut khas ini menggunakan fixAttr, seperti kelas.

Kemudian contoh kod di atas boleh diubah suai ke dalam bentuk berikut:

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

Kod di atas adalah sah dalam semua penyemak imbas utama, dan boleh menetapkan saiz fon kepada 18px dan warna kepada merah.
Bagi atribut gaya, anda boleh menggunakan el.style.color="xxx" untuk keserasian.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Javascript melaksanakan acara Backspace yang melindungi halaman web, kotak input tidak dilindungi_Pengetahuan asasArtikel seterusnya：Javascript melaksanakan acara Backspace yang melindungi halaman web, kotak input tidak dilindungi_Pengetahuan asas

Artikel berkaitan

Lihat lagi