【jQuery】動的に属性を変更する方法

jQueryを使って動的に属性を変更する方法はいくつかあります。主に使うメソッドは、attr()やprop()です。以下に、よく使う例を示します。

1. attr()を使用して属性を変更

attr()メソッドは、HTML属性の値を取得したり、設定したりするために使います。

属性を設定する例

<!-- HTML -->
<img id="myImage" src="old-image.jpg" alt="Old Image">

<!-- jQuery -->
<script>
    // img要素のsrc属性を変更
    $('#myImage').attr('src', 'new-image.jpg');
</script>

この例では、画像のsrc属性を'new-image.jpg'に変更しています。

属性を複数同時に設定する例

<!-- HTML -->
<a id="myLink" href="#" title="Old Title">リンク</a>

<!-- jQuery -->
<script>
    // href属性とtitle属性を一度に変更
    $('#myLink').attr({
        href: 'https://example.com',
        title: 'New Title'
    });
</script>

2. prop()を使用してプロパティを変更

prop()メソッドは、DOM要素のプロパティ（チェックボックスのchecked状態や、ボタンのdisabled状態など）を変更するために使います。

チェックボックスの例

<!-- HTML -->
<input type="checkbox" id="myCheckbox">

<!-- jQuery -->
<script>
    // チェックボックスをチェック済みにする
    $('#myCheckbox').prop('checked', true);
</script>

ボタンを無効化する例

<!-- HTML -->
<button id="myButton">クリックできるボタン</button>

<!-- jQuery -->
<script>
    // ボタンを無効化
    $('#myButton').prop('disabled', true);
</script>

3. removeAttr()で属性を削除

属性を削除したい場合は、removeAttr()を使用します。

<!-- HTML -->
<img id="myImage" src="image.jpg" alt="Image">

<!-- jQuery -->
<script>
    // alt属性を削除
    $('#myImage').removeAttr('alt');
</script>

まとめ

attr()は属性の取得・設定に使用
prop()はDOMプロパティの操作に使用
removeAttr()で属性を削除

これらを使えば、動的にHTML要素の属性やプロパティを柔軟に変更することができます。