HTML Element

概要

ユーザインターフェース用のパーツなどを扱います。

メソッド

メソッド名	処理内容	備考
createElement	指定されたタグの HTML要素を生成
createButton	ボタンを生成
createSlider	スライダーを生成
createInput	入力ボックスを生成
createCheckbox	チェックボックスを生成
createRadio	ラジオボタンを生成
createSelect	ドロップダウンメニュー(選択リスト)を生成
createDiv	ブロックレベル要素を生成
createImg	イメージ要素を生成
createCapture	ビデオキャプチャを生成	p5mediaelementオブジェクト
createColorPicker	カラー入力用のピッカーを生成
createFileInput	ファイル選択用のダイアログを生成
select	CSSセレクタに一致する HTML要素を取得
selectAll	CSSセレクタに一致する HTML要素の配列を取得

p5elementオブジェクト
　(プロパティ)

プロパティ名	内容	備考
elt	オブジェクトの基礎となる HTML要素
width	HTML要素の幅
height	HTML要素の高さ

　(インスタンスメソッド)

属性操作
メソッド名	処理内容	備考
position	HTML要素の表示位置を設定または取得
size	HTML要素のサイズを設定または取得
style	HTML要素のスタイルを設定または取得
html	HTML要素の innerHTMLの内容を設定または取得
value	HTML要素の値を設定または取得
show	HTML要素を表示
hide	HTML要素を非表示
remove	HTML要素を削除
draggable	HTML要素をドラッグ可能状態に設定
checked	HTML要素の値がチェックされたかどうかを判定	createCheckboxで生成されたオブジェクトのみ有効
option	HTML要素に選択項目を追加	createRadioまたは createSelectで生成されたオブジェクトのみ有効
selected	HTML要素の中の初期選択項目を設定または選択された項目を取得	createRadioまたは createSelectで生成されたオブジェクトのみ有効
disable	HTML要素の中の選択項目を無効化	createRadioまたは createSelectで生成されたオブジェクトのみ有効
enable	HTML要素の中の選択項目を有効化	createSelectで生成されたオブジェクトのみ有効
vertical	HTML要素の中の選択項目を縦に整列して表示	createRadioで生成されたオブジェクトのみ有効 (rbCanvas/p5独自拡張)
loadedmetadata	ビデオキャプチャのロードが完了したかどうかを判定	createCaptureで生成されたオブジェクトのみ有効
get	ビデオキャプチャからピクセルの領域または単一のピクセルの値を取得	createCaptureで生成されたオブジェクトのみ有効
イベント処理
メソッド名	処理内容	備考
mouseClicked	HTML要素上でマウスの左ボタンがクリックされたときに実行する処理を登録
doubleClicked	HTML要素上でマウスの左ボタンがダブルクリックされたときに実行する処理を登録
mousePressed	HTML要素上でマウスボタンが押されたときに実行する処理を登録
mouseReleased	HTML要素上でマウスボタンが離されたときに実行する処理を登録
mouseMoved	HTML要素上でマウスボタンが移動したときに実行する処理を登録
mouseOver	HTML要素上にマウスポインタが乗ったときに実行する処理を登録
mouseOut	HTML要素上からマウスポインタが離れたときに実行する処理を登録
mouseWheel	HTML要素上でマウスホイールイベントが検出されたときに実行する処理を登録
dragOver	ファイルがHTML要素上にドラッグされたときに実行する処理を登録
dragLeave	ドラッグされたファイルがHTML要素上から離れたときに実行する処理を登録
drop	ファイルがHTML要素上にドロップされたときに実行する処理を登録
changed	HTML要素の値が変更されたときに実行する処理を登録
input	HTML要素に値が入力されたときに実行する処理を登録

対応表

	elt.localName	elt.type	属性操作																	イベント処理
			position	size	style	html	value	show	hide	remove	draggable	checked	option	selected	disable	enable	vertical	loadedmetadata	get	mouseClicked	doubleClicked	mousePressed	mouseReleased	mouseMoved	mouseOver	mouseOut	mouseWheel	dragOver	dragLeave	drop	input	changed
createButton	button	submit	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	-	-	-	-	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	△	△
createSlider	input	range	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	-	-	-	-	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎
createInput	input	text passwordなど (引数に依存)	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	-	-	-	-	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎
createCheckbox	div	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	○	-	-	-	-	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎
createRadio	div	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	○	○	○	-	○	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎
createSelect	select	select-one select-multiple (引数に依存)	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	○	○	○	○	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎
createDiv	div	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	-	-	-	-	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	△	△
createImg	img	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	-	-	-	-	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	△	△
createCapture	video	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	-	-	-	-	-	○	○	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	△	△
createColorPicker	input	color	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	-	-	-	-	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎
createFileInput	input	file	◎	◎	◎	◎	◎	◎	◎	◎	◎	-	-	-	-	-	-	-	-	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎	◎

p5.jsリファレンス(参考情報)
p5.Element
p5.MediaElement