More than 3 years have passed since last update.

【jquery,js】マウスオーバーで属性を取得する [attr,hover] [js03_20210217]

Last updated at 2021-02-17Posted at 2021-02-16

処理の概要

リンクにマウスオーバーすると、リンクのタイトルをテキストボックスに表示する

処理のフロー：

　(1)リンクにマウスポインターを乗せる
　(2)リンクのa要素からtitle属性の値を取得
　(3)取得したタイトル属性をテキストボックスに表示する

画面イメージ

画像１

画像２

ソースコード

index.html

<body>
       <a href="" title="グーグルの検索サイトです。" class="link">
         グーグル
       </a>
       <br>
       <a href="" title="ヤフーの検索サイトです。" class="link">
         ヤフー
       </a>
       <br>

       <textarea style="height: 2em; width: 400px; color: blue;" id="output"></textarea>
    </body>

main.js

$(function(){
    $("a.link").hover(function(){
        var ele = $(this);
        var title = ele.attr("title");
        $("#output").val(title);
    },function(){
        $("#output").val("");
    })
})

ポイント

html：
(1) -
js：
(1)attrで属性を取得する（html系はattr。input系はprop）
(2)hover()メソッドにイベントを登録する。このとき、第一引数は【乗った時用の処理】、第二引数は【外れた時用の処理】

参考資料

JavaScript(仕事の現場でサッと使える！デザイン教科書)　p170

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up