JavaScript で要素の属性を変更する方法

JavaScript での要素の取得方法のページでHTML要素の取得について記述したのですが、今回はその取得した要素の属性に関係するDOMのメソッドについて記述しておきます。

なお、属性に値を入れること自体は以下の形式で行えます。

  • オブジェクト.属性名 = 値;

なので、この形式で値を設定できない場合に以下の setAttribute メソッドを利用しましょう。

要素の属性を変更するメソッド

メソッド
属性の設定
.setAttribute('属性名','値')
属性の削除
.removeAttribute('属性名')
属性値の取得
.getAttribute('属性名')

属性とその値を設定する / .setAttribute

.setAttribute メソッドは、オブジェクトである要素に()内に指定した属性とその値を設定できます。

すでに要素にある属性の場合は、上書きを行い、そうでない場合は要素に属性と値が追加されます。

なお、IE7以下では属性の値に関数を設定する場合、値の記述が少し違いがあります。

通常
  • 要素オブジェクト.setAttribute('属性名','関数名()');
IE7以下
  • 要素オブジェクト.setAttribute('属性名','new Function(関数名())');

なので、実際に関数を値として利用する場合は、if文でIE7以下かどうかを確認して分岐させる必要があります。

これを踏まえて記述すると、このようになります。

  • if(ua.match(/msie\s[0-7]\./)){
    • t_a.setAttribute('onmouseover',new Function('s_time()'));
  • }else{
    • t_a.setAttribute('onmouseover','s_time()');
  • }

この記述の関数名やオブジェクト名は確認用サンプルに使用している記述です。
変数 ua には、window.navigator.userAgent.toLowerCase() が入っています。

確認用サンプル

以下は属性の設定と削除をテストするために作成したサンプルです。文字部分にマウスが乗ると時刻が表示されるようにしてあります。

一度表示されると removeAttribute メソッドで onmouseover 属性を削除するようにしてあり、リセットボタンで属性を再設定するようになっています。

この部分にマウスを乗せてみて下さい。現在の時刻が表示されます。

属性値を取得する / .getAttribute

最後に、getAttribute メソッドについてですが、これは指定した属性の値を取得するものです。

例えば、ある属性を持つ要素のみを取得したい場合などに利用することができます。

ボタンを押すと、このページの a タグの総数、target='_blank' を持つ a タグの数とそのURLが表示されます。
このサンプルで行っていること。
  1. 配列に getElementsById で全ての a 要素を取得して代入。
  2. 次に、その配列から getAttribute で target 属性の値が _blank の場合のみカウントを行い、その href 属性の値を別の配列で取得。
  3. 最後に href 属性の値が代入された配列を連結して表示。

動作確認のために適当にサンプルを作ってみましたが、だいたいこういう風に属性で絞り込む場合に利用できます。

スポンサードリンク

inserted by FC2 system