ホームページ > 記事 > ウェブフロントエンド > JavaScript で setAttribute() 関数を使用する方法とその互換性_JavaScript スキル
JavaScript で setAttribute() 関数を使用する方法とその互換性_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:49:371600ブラウズ
setAttribute() 関数は、オブジェクトの属性を設定できます。この属性が存在しない場合は作成されます。
文法構造:
el.setAttribute(名前,値)
パラメータリスト:
パラメータの説明
名前は必須です。設定する属性名を指定します。
値が必要です。設定するプロパティ値を指定します。
コード例:
<!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 属性値をポップアップできます。
例 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>
上記のコードは、div の newAttr 属性値を設定し、この属性値をポップアップできます。ここで特別な注意が必要なのは、デフォルトでは div には newAttr 属性がないため、setAttribute() 関数は最初にこの属性を作成し、次に値を割り当てることです。
上記の 2 つのコード例は、すべての主流ブラウザで正常に実行できますが、これは 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>
上記のコードは、標準ブラウザでフォント サイズを 18 ピクセルに設定し、フォントの色を赤に設定できますが、IE6 および IE7 ブラウザでは有効になりません。
ただし、mydiv.getAttribute("class") を使用して属性値「textcolor」を取得することはできます。
つまり、IE6 または IE7 ブラウザでは setAttribute() 関数を使用できますが、すべての属性に対して有効であるわけではありません。
次の属性には上記の問題があります:
1.クラス
2.for
3.セル間隔
4.セルパディング
5.tabindex
6.読み取り専用
7.最大長
8.行スパン
9.colspan
10.使用マップ
11.フレームボーダー
12.コンテンツ編集可能
13.スタイル
上記の問題を解決するには、要素の属性を設定するためのユニバーサル クロスブラウザ インターフェイス メソッドを記述する必要があります。
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 属性は引き続き元の属性名を使用します。最後に、これらの特殊な属性は、class などの fixAttr を使用します。
上記のコード例は次の形式に変更できます:
<!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>
上記のコードはすべての主要なブラウザで有効で、フォント サイズを 18 ピクセル、色を赤に設定できます。
style 属性については、互換性を確保するために el.style.color="xxx" を使用できます。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。