メソッド attr

メソッド attr は要素の任意の属性を取得および変更することができます。

要素のプロパティと属性を混同しないことが重要です。DOMツリーが作成されるとき、属性は対応するDOM要素のプロパティに変換されます。それらの名前と値は常に一致するとは限りません。また、一部のプロパティには対応する属性がなく、prop メソッドを使用した場合にのみ取得および設定できます。例えば、tagName プロパティがそれに該当します。

構文

属性値の取得:

$(セレクター).attr(属性名);

属性値の変更:

$(セレクター).attr(属性名, 新しい値);

複数の属性値の変更:

$(セレクター).attr({最初の属性: 新しい値, 二番目の属性: 新しい値, ...});

セット内の各要素に関数を適用:

$(セレクター).attr(属性名, function(セット内の番号, 属性の現在の値));

例

次の例では、入力要素をその id で取得し、その value 属性の値を画面に出力します:

<input type="text" value="!!!" id="test">

let value = $('#test').attr('value');
console.log(value);

例

次に、同じ属性に新しい値 'www' を書き込みます:

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

HTMLコードは以下のようになります:

<input type="text" value="www" id="test">

例

では、type と value 属性を同時に変更しましょう:

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

HTMLコードは以下のようになります:

<input type="password" value="www" id="test">

例

すべての入力要素の value 属性を、現在の value にセット内の要素の順序番号を加えて変更しましょう:

<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

$('input').attr('value', function(index, value) {
	return value + ' ' + index;
});

HTMLコードは以下のようになります:

<input type="text" value="aaa 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">

メソッド attr

構文

例

例

例

例

関連項目