attr()メソッド

attr()は、HTML要素の属性を取得したり設定することができるメソッド。

id属性を取得・変更する

以下の例では、id属性が付与されたp要素が配置されている。このp要素に対して「attr(‘id’)」と記述することで、id属性の値を取得することができる。

<body>
  <p id="sample">こんにちは</p>

  <script>
    const result = $('p').attr('id');
    console.log( result ); //「sample」が出力される
  </script>
</body>;

以下のように「attr(‘id’, ‘text’)」のように記述することで、id属性値を「text」に変更している。もともと設定されていたid属性値「sample」はattr()によって上書きされるため、新しく「text」という値に固定される。

<body>
  <p id="sample">こんにちは</p>

  <script>
    const result = $('p').attr('id', 'text');
    console.log( result );
  </script>
</body>;

<!-- 実行結果 -->
<p id="text">こんにちは</p>

class属性を設定する

「attr()」メソッドを使うと、そもそも属性が付与されていない要素に対して好きな属性を付与することができる。

<body>
  <p>こんにちは</p>

  <script>
    const result = $('p').attr('id', 'text');
    console.log( result[0] );
  </script>
</body>

<!-- 実行結果 -->
<p id="text">こんにちは</p>

上記の例では、p要素に対して「attr(‘id’, ‘text’)」のように記述すると、p要素にid属性が付与される。

複数の属性を設定する

「attr()」は一度に複数の属性を設定することもできる。
記述方法としては【 対象要素.attr( { 属性:’値’, 属性:’値’, 属性:’値’,・・・ } ) 】のように、{ }で複数の属性を囲む。

<body>
  <input>
  
  <script>
    const result = $('input').attr({
      id: 'text',
      class: 'form',
      type: 'checkbox',
      value: 'one',
      checked: true
    });
    
    console.log( result[0] );
  </script>
</body>

<!-- 実行結果 -->
<input id="text" class="form" type="checkbox" value="one" checked="checked">

上記の例では、何の属性も付与されていない「inputタグ」が配置されている。
このinput要素に対して、「id / class / type / value / checked」の属性をattr()を使って一度に設定している。

inserted by FC2 system