happy cat image

everdevel

coding

login
お知らせX
  • 現在、コメントだけのお知らせだけ表示します。
  • 表するコメントかログインしてください。

属性 変更

attr('属性','属性のバリュー');

attr()はタグにある src="" alt="" class="" title="" などの属性のバリューを変更する時に使います。

例えば

<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />

上にあるimgタグのsrc属性のバリューを変更したり、altの属性のバリューを変更する時に使います。

disney

では、上のイメージをクリックするとsrc属性のバリューを変更してホンダ社のアシモが出るようにしてみましょう。

そうするためにはattr('','')の1番目は変更する属性の名を書きます、2番目は適用する属性のバリューを書きます。

var myimage = $('.myimage');
    myimage.click(function(){
    myimage.attr('src','/material/images/jQuery/asimo.png');
});

下にある東京ディズニーランドのシンデレラの城のイメージをクリックしてください、そうしたらイメージが変えます。

disney

つまり、

<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
上のコードが
<img class="myimage" src="/material/images/jQuery/asimo.png" alt="disney" />
に変更されました。

では、直接やってみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script>
$(function(){
    var myimage = $('.myimage');
        myimage.click(function(){
        myimage.attr('src','/material/images/jQuery/asimo.png');
    });
});
</script>
<style>
</style>
</head>
<body>
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
</body>
</html>

その意外にもaタグのhrefの属性のバリューを変えたり、することもできます。^^


ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。


    
    

講義に戻る。

コメント 0個

並べ替え