prop とは
- ここで説明する prop とは次の語句からなる jQuery のメソッドです。
- property
- 読み: プロパティ
意味: 属性、財産、資産、物件、所有物、特性、性質、効能
prop メソッドの概要
このメソッドは、要素のプロパティ ( 属性 ) の値を取得、または設定します。
これを具体的にいうと、JavaScript からアクセスできる要素のプロパティ ( 属性 ) の値を取得したり、設定したりできるということです。
JavaScript のコードでは
エレメント.プロパティ という記述でプロパティ値の取得を行い、
エレメント.プロパティ = 代入値 という記述でプロパティ値の設定を行いますが、
この prop() メソッドでは 第一引数のみの指定でプロパティを参照し、第一引数と第二引数の指定でプロパティ値の書き換えを指示します。
構文
サンプルを見る前に構文を確認しておきます。
var propertyValue = $(Selector).prop(propertyName);
$(Selector).prop(propertyName, propertyValue);
サンプルコードと実行結果
サンプルコード: CSS
<style>
#idOutput{
display: block;
background-color: ##lightblue;
margin: 2em 0;
padding: 0 0.5em;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" value="サンプルテキスト" id="idText">
<output id="idOutput"> innerText </output>
<input type="button" value="ボタン" id="idButton">
<script>...</script>
</body>
- 06: input type="text" id="idText" (テキストボックス要素です。識別子は idText です。)
- 07: output id="idOutput" (出力要素です。識別子は idOutput です。)
- 08: input type="button" id="idButton" (ボタン要素です。識別子は idButton です。このボタンをクリックすることで script コードの 02 ~ 04 行目が実行されます。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("#idOutput").prop("innerText", $("#idText").prop("value"));
});
</script>
- 02: $("#idButton").click(function(){ 処理 } (idButton の要素がクリックされると { 処理 } の部分が実行されます。)
- 03: $("#idOutput").prop("innerText", $("#idText").prop("value")) (idOutput の要素の innerText プロパティに idText の要素の value プロパティの値が代入されます。)