[jQuery] 属性値を設定/取得する（.attr）

投稿日：2018年10月24日

属性値を設定/取得するには、.attr()を使用します。

構文

（属性値を取得する構文）: var a = attr('＜属性名＞')

（属性値を設定する構文）: prop('＜属性名＞', '＜値＞')

サンプルソース

例）ボタンを押すと画像のsrc属性値を取得・設定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>attrサンプル</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){
    //src属性値を取得する
    var a = $('#img1').attr('src');
    alert(a);
  });

  $('#btn2').click(function(){
    $('#img1').attr('src', 'aaa.png');
    //src属性をセットする
    alert("セットしました");
  });
});
</script>
</head>
<body>
  <img src="xxx.png" id="img1"><br>
  <input type="button" id="btn1" value="属性値を取得する">
  <input type="button" id="btn2" value="属性値を設定する">
</body>
</html>

<!DOCTYPE html>

<head>

<title>attrサンプル</title>

$(function(){

$('#btn1').click(function(){

//src属性値を取得する

var a = $('#img1').attr('src');

alert(a);

});

$('#btn2').click(function(){

$('#img1').attr('src', 'aaa.png');

//src属性をセットする

alert("セットしました");

});

</script>

</head>

<body>

</body>

</html>

[jQuery] 属性値を設定/取得する（.attr）

構文

サンプルソース

例）ボタンを押すと画像のsrc属性値を取得・設定する

関連項目