p5.Element

要素を親要素に添付します。

例えば、

parentパラメータは3つのタイプのいずれかを取ることができます。 parentは親要素のIDを持つ文字列、例えば myElement.parent('container')のようになります。また、 myElement.parent(myDiv)のように、別の p5.Elementオブジェクトにすることもできます。 最後に、parentはHTMLElement オブジェクトにすることもでき、myElement.parent(anotherElement)のようになります。

引数なしでmyElement.parent()を呼び出すと、要素の 親を返します。

与えられた文字列を使用して要素のIDを設定します。

引数なしでmyElement.id()を呼び出すと、そのIDを文字列として返します。

与えられた文字列を使用して要素に class属性 を追加します。

引数なしでmyElement.class()を呼び出すと、現在のクラスを含む文字列を返します。

要素上でマウスが押されたときに関数を呼び出します。

myElement.mousePressed(false)を呼び出すと、関数を無効にします。

注意：一部のモバイルブラウザでは、要素が クイックタップを受け取ったときにもこのイベントがトリガーされる場合があります。

要素上でマウスが2回押されたときに関数を呼び出します。

myElement.doubleClicked(false)を呼び出すと、関数を無効にします。

要素上でマウスホイールがスクロールされたときに関数を呼び出します。

コールバック関数fxnにはeventオブジェクトが渡されます。eventには 2つの数値プロパティdeltaYとdeltaXがあります。event.deltaYは マウスホイールがユーザーから離れる方向に回転した場合は負の値になります。ユーザーに 向かって回転した場合は正の値になります。event.deltaXは マウスホイールが右に移動した場合は正の値になります。左に移動した場合は 負の値になります。

myElement.mouseWheel(false)を呼び出すと、関数を無効にします。

要素上でマウスが離されたときに関数を呼び出します。

myElement.mouseReleased(false)を呼び出すと、関数を無効にします。

注意：一部のモバイルブラウザでは、要素が クイックタップを受け取ったときにもこのイベントがトリガーされる場合があります。

要素上でマウスが押されて離されたときに関数を呼び出します。

myElement.mouseReleased(false)を呼び出すと、関数を無効にします。

注意：一部のモバイルブラウザでは、要素が クイックタップを受け取ったときにもこのイベントがトリガーされる場合があります。

要素上でマウスが移動したときに関数を呼び出します。

myElement.mouseMoved(false)を呼び出すと、関数を無効にします。

マウスが要素上に移動したときに関数を呼び出します。

myElement.mouseOver(false)を呼び出すと、関数を無効にします。

マウスが要素から離れたときに関数を呼び出します。

myElement.mouseOut(false)を呼び出すと、関数を無効にします。

要素がタッチされたときに関数を呼び出します。

myElement.touchStarted(false)を呼び出すと、関数を無効にします。

注意：タッチ機能はモバイルデバイスでのみ動作します。

ユーザーが要素をタッチして移動したときに関数を呼び出します。

myElement.touchMoved(false)を呼び出すと、関数を無効にします。

注意：タッチ機能はモバイルデバイスでのみ動作します。

ユーザーが要素のタッチを終了したときに関数を呼び出します。

myElement.touchMoved(false)を呼び出すと、関数を無効にします。

注意：タッチ機能はモバイルデバイスでのみ動作します。

ファイルが要素上にドラッグされたときに関数を呼び出します。

myElement.dragOver(false)を呼び出すと、関数を無効にします。

ファイルが要素から離れたときに関数を呼び出します。

myElement.dragLeave(false)を呼び出すと、関数を無効にします。

要素にクラスを追加します。

要素からクラスを削除します。

クラスが要素に既に適用されているかどうかをチェックします。

要素にクラスを適用するかどうかを切り替えます。

要素を別の要素の子として添付します。

myElement.child()は文字列ID、DOMノード、または p5.Elementのいずれかを受け入れます。例えば、 myElement.child(otherElement)のようになります。引数が提供されない場合、 子DOMノードの配列が返されます。

要素を垂直方向、水平方向、または両方の方向で中央に配置します。

center()は、要素の親に対して、または要素に親がない場合は ページのボディに対して要素を中央に配置します。

引数が渡されない場合、myElement.center()のように、要素は 垂直方向と水平方向の両方で中央に配置されます。

要素の内部HTMLを設定し、既存のHTMLを置き換えます。

2番目のパラメータappendはオプションです。trueが渡された場合、 myElement.html('hi', true)のように、HTMLは置き換えではなく 追加されます。

引数が渡されない場合、myElement.html()のように、要素の 内部HTMLが返されます。

要素の位置を設定します。

最初の2つのパラメータxとyは、ウェブページの左上隅を 基準にした要素の位置を設定します。

3番目のパラメータpositionTypeはオプションです。要素の 配置方法 を設定します。 positionTypeは'static'、'fixed'、 'relative'、'sticky'、'initial'、または 'inherit'のいずれかの文字列です。

引数が渡されない場合、myElement.position()のように、メソッドは 要素の位置を{ x: 0, y: 0 }のようなオブジェクトで返します。

CSS宣言を追加することで、要素にスタイルを適用します。

最初のパラメータpropertyは文字列です。スタイル プロパティの名前が渡された場合、myElement.style('color')のように、メソッドは 現在の値を文字列として返すか、設定されていない場合はnullを返します。 property:value形式の文字列が渡された場合、 myElement.style('color:deeppink')のように、メソッドはスタイル propertyをvalueに設定します。

2番目のパラメータvalueはオプションです。プロパティの値を設定します。 valueは文字列、myElement.style('color', 'deeppink')のように、 またはp5.Colorオブジェクト、 myElement.style('color', myColor)のようにできます。

要素に 属性 を追加します。

このメソッドは高度なタスクに役立ちます。もっとも一般的に使用される属性、 例えばidなどは、専用のメソッドで設定できます。例えば、 nextButton.id('next')は要素のid属性を設定します。 nextButton.attribute('id', 'next')を呼び出すのと同じ効果があります。

最初のパラメータattrは、属性の名前を文字列で指定します。 myElement.attribute('align')を呼び出すと、属性の現在の値を 文字列として返すか、設定されていない場合はnullを返します。

2番目のパラメータvalueはオプションです。属性の値を設定するために 使用される文字列です。例えば、myElement.attribute('align', 'center') を呼び出すと、要素の水平方向の配置をcenterに設定します。

要素から属性を削除します。

パラメータattrは、属性の名前を文字列で指定します。例えば、 myElement.removeAttribute('align')を呼び出すと、設定されている場合に align属性を削除します。

要素の値を返すか設定します。

myElement.value()を呼び出すと、要素の現在の値を返します。

パラメータvalueはオプションの数値または文字列です。提供された場合、 myElement.value(123)のように、要素の値を設定するために使用されます。

現在の要素を表示します。

現在の要素を非表示にします。

要素の幅と高さを設定します。

引数なしでmyElement.size()を呼び出すと、要素のサイズを widthとheightプロパティを持つオブジェクトとして返します。 例えば、{ width: 20, height: 10 }のようになります。

最初のパラメータwidthはオプションです。要素の幅を設定するために 使用される数値です。myElement.size(10)を呼び出すと

2番目のパラメータheightもオプションです。要素の高さを設定するために 使用される数値です。例えば、myElement.size(20, 10)を呼び出すと、 要素の幅を20ピクセル、高さを10ピクセルに設定します。

定数AUTOを使用すると、アスペクト比（width / height）を 維持しながら、一度に1つの次元を調整できます。例えば、 幅が200ピクセル、高さが100ピクセルの要素を考えてみましょう。 myElement.size(20, AUTO)を呼び出すと、幅を20ピクセル、高さを10ピクセルに 設定します。

注意：画像などのデータをロードする必要がある要素の場合、 データがロードされた後にmyElement.size()を呼び出すまで待ってください。

要素を削除し、すべてのオーディオ/ビデオストリームを停止し、すべての コールバック関数を削除します。

ユーザーが要素上にファイルをドロップしたときに関数を呼び出します。

最初のパラメータcallbackは、ファイルがロードされた後に呼び出される 関数です。コールバック関数は1つのパラメータfileを持ち、これは p5.Fileオブジェクトです。ユーザーが 複数のファイルを要素上にドロップした場合、callbackは各ファイルに対して 1回ずつ呼び出されます。

2番目のパラメータfxnは、ブラウザが1つ以上のドロップされたファイルを 検出したときに呼び出される関数です。コールバック関数は1つのパラメータ eventを持ち、これは DragEventです。

要素をドラッグ可能にします。

パラメータelmntはオプションです。別の p5.Elementオブジェクトが渡された場合、 myElement.draggable(otherElement)のように、その他の要素が ドラッグ可能になります。