堀北真希うさぎ
主な作品
堀北真希ちゃんがボシュロム社ソフトコンタクトレンズ洗浄液TVコマーシャルに出演した事に因んだ、コンタクトを装着している堀北真希うさぎのイラストと仮想CM動画

ページ案内▼

setAttribute()メソッド。

要素ノードに指定された属性名・属性値の属性を設定するsetAttribute()メソッドの解説です。

setAttribute()メソッド・目次。

setAttribute()メソッドとは。

setAttribute()メソッドとは、要素ノードに指定された属性名・属性値の属性を設定するメソッドです。

既に同名の属性があった場合には上書されます。

setAttribute()メソッドを実装するインタフェイス。

setAttribute()メソッドはElementインタフェイスに依って実装されます。

従って、要素ノードでのみsetAttribute()メソッドを得る事が出来ます。

setAttribute()メソッドの引数と返し値。

setAttribute()メソッドは以下の二つの引数を取ります。

  1. 属性名
  2. 属性値…実体参照を含まない文字列。詳細は後述します。

尚、多くのウェブブラウザ上で動作するJAVAスクリプトでは、第三引数として大文字小文字の区別をするか否かを指定しますが、在来のHTMLでは大文字小文字を区別しないため、特に問題はありません。

setAttribute()メソッドの返し値は、特にありません。

setAttribute()メソッドのJAVAスクリプトでの使用例。

新規に生成した<img>要素ノードにsrc属性とalt属性を与え、それをIDで指定された要素に追加している場面です。

var e=document.createElement('img');
e.setAttribute('src', 'http://www.uso800.uso/images/HORIKITA_Maki.JPG');
e.setAttribute('alt', '堀北真希ちゃん');

if ((d=document.getElementById('SHOW'))!=null) {;
    d.appendChild(e);
    }

setAttribute()メソッドを使う上での注意事項。

属性値に実体参照を含む場合について。

setAttribute()メソッドに属性値として与えられる文字列は実体参照を含まない通常の文字列です。

従って、例えば値として &amp; と言う値を含めた場合、文字参照が評価されて & と言う文字に変換されるのではなく、生テキスト同様に評価され、字面通りに &amp; と言う値にされる事に注意してください。

もし、実体参照を含めた属性値を意図通りに設定したいのであれば、通常のsetAttributeNode()メソッドを用いる必要があります。

インターネットエクスプローラでのclass属性の実装について。

インターネットエクスプローラでは、HTMLでのclass属性は className属性としております。

従って、

○○.setAttribute('class', '△△')

とした場合、インターネットエクスプローラでは正常にclass属性を設定する事は出来ません。

このため、以下のようにする事でインターネットエクスプローラでも正常にclass属性を設定出来るようになります。

○○.setAttribute('class', '△△');
○○.setAttribute('className', '△△');

関連事項

要素ノードとElementインタフェイス
要素ノードと要素ノードに実装されているElementインタフェイスについて
attributesプロパティ
当該要素ノードに与えられた属性の集まりのオブジェクト
getAttribute()メソッド
指定された属性名の属性値の取得
removeAttribute()メソッド
指定された属性の除去
getAttributeNode()メソッド
指定された属性名の属性ノードの取得
setAttributeNode()メソッド
指定された属性名に対しての属性ノードの設定
removeAttributeNode()メソッド
指定された属性ノードの除去

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com