【jQuery-9】attr()メソッドを使って属性値をいじる【プログラミング初心者】

2021/12/14

PC全般

t f B! P L

 

超初心者向けの jQuery 講座も9回目となりました。これは超初心者である自分が勉強した記録としてアウトプットしているものになります。

今回は attr() メソッドを使って、要素内の属性を変更したり取得したりといった命令をしてみましょう。

【attr()】要素の属性値を設定または変更できる

See the Pen attr() by taichi (@taichi_na) on CodePen.

ここではわかりやすくするために、画像を表示する<img>要素の src 属性を変更して、表示させる画像を変える操作をしています。

指定した要素内の属性値であれば何でも変えることができます。


上の例では、ただ変えたのでは変化がわかりにくいので、クリックしたら変わるというスクリプトになっています。

クリックしたら~する、という記述の仕方は以下を参考にしてください。

【jQuery-3】メソッドに対して引数ではなく関数を指定する

ちょっと画像のパスが長くなってしまってわかりづらいかもしれませんが、とりあえずクリックをすると、<img>内の src 属性値が変わって画像が切り替わるのが理解できたと思います。

【attr()】要素の属性値を取得する

See the Pen attr()2 by taichi (@taichi_na) on CodePen.

同じ attr() メソッドを使用して、今度は指定したセレクタの属性の値を取得して表示させてみましょう。

上の例では、<img>要素の alt 属性の中身を取得して <p> に出力させています。

 先ほどは引数を二つ使って属性値を変更しましたが、引数を一つにして属性のみ記述すると、その属性の値を取得できるということです。

ということで、今回は以上になります。



1981年生まれ。北海道在住。現在無職でアルバイトをしながらプログラミングを勉強中。木工を長らくしていたのでそちらの知識と技能はあります。ミニマリスト/ヴィーガン/アフリカに4年

カテゴリー別に記事を探す

このブログを検索

Contact

名前

メール *

メッセージ *

QooQ

TOP