ywork2020.com

Title

要素のプロパティを操作する

目次 (INDEX)

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 プロパティの値が代入されます。)
実行結果:
innerText

目次に戻る