A class to describe an HTML element.
Sketches can use many elements. Common elements include the drawing canvas, buttons, sliders, webcam feeds, and so on.
All elements share the methods of the p5.Element class. They're created with functions such as createCanvas() and createButton().
Examples
Syntax
p5.Element(elt, [pInst])Parameters
wrapped DOM element.
pointer to p5 instance.
Fields
The element's underlying HTMLElement object.
The HTMLElement object's properties and methods can be used directly.
A Number property that stores the element's width.
A Number property that stores the element's height.
Methods
Attaches the element to a parent element.
For example, a element may be used as a box to hold two pieces of text, a header and a paragraph. The is the parent element of both the header and paragraph.
The parameter parent can have one of three types. parent can be a string with the parent element's ID, as in myElement.parent('container'). It can also be another p5.Element object, as in myElement.parent(myDiv). Finally, parent can be an HTMLElement object, as in myElement.parent(anotherElement).
Calling myElement.parent() without an argument returns the element's parent.
Sets the element's ID using a given string.
Calling myElement.id() without an argument returns its ID as a string.
Adds a class attribute to the element using a given string.
Calling myElement.class() without an argument returns a string with its current classes.
Calls a function when the mouse is pressed over the element.
Calling myElement.mousePressed(false) disables the function.
Note: Some mobile browsers may also trigger this event when the element receives a quick tap.
Calls a function when the mouse is pressed twice over the element.
Calling myElement.doubleClicked(false) disables the function.
Calls a function when the mouse wheel scrolls over the element.
The callback function, fxn, is passed an event object. event has two numeric properties, deltaY and deltaX. event.deltaY is negative if the mouse wheel rotates away from the user. It's positive if the mouse wheel rotates toward the user. event.deltaX is positive if the mouse wheel moves to the right. It's negative if the mouse wheel moves to the left.
Calling myElement.mouseWheel(false) disables the function.
Calls a function when the mouse is released over the element.
Calling myElement.mouseReleased(false) disables the function.
Note: Some mobile browsers may also trigger this event when the element receives a quick tap.
Calls a function when the mouse is pressed and released over the element.
Calling myElement.mouseReleased(false) disables the function.
Note: Some mobile browsers may also trigger this event when the element receives a quick tap.
Calls a function when the mouse moves over the element.
Calling myElement.mouseMoved(false) disables the function.
Calls a function when the mouse moves onto the element.
Calling myElement.mouseOver(false) disables the function.
Calls a function when the mouse moves off the element.
Calling myElement.mouseOut(false) disables the function.
Calls a function when the element is touched.
Calling myElement.touchStarted(false) disables the function.
Note: Touch functions only work on mobile devices.
Calls a function when the user touches the element and moves.
Calling myElement.touchMoved(false) disables the function.
Note: Touch functions only work on mobile devices.
Calls a function when the user stops touching the element.
Calling myElement.touchMoved(false) disables the function.
Note: Touch functions only work on mobile devices.
Calls a function when a file is dragged over the element.
Calling myElement.dragOver(false) disables the function.
Calls a function when a file is dragged off the element.
Calling myElement.dragLeave(false) disables the function.
Adds a class to the element.
Removes a class from the element.
Checks if a class is already applied to element.
Toggles whether a class is applied to the element.
Attaches the element as a child of another element.
myElement.child() accepts either a string ID, DOM node, or p5.Element. For example, myElement.child(otherElement). If no argument is provided, an array of children DOM nodes is returned.
Centers the element either vertically, horizontally, or both.
center() will center the element relative to its parent or according to the page's body if the element has no parent.
If no argument is passed, as in myElement.center() the element is aligned both vertically and horizontally.
Sets the inner HTML of the element, replacing any existing HTML.
The second parameter, append, is optional. If true is passed, as in myElement.html('hi', true), the HTML is appended instead of replacing existing HTML.
If no arguments are passed, as in myElement.html(), the element's inner HTML is returned.
Sets the element's position.
The first two parameters, x and y, set the element's position relative to the top-left corner of the web page.
The third parameter, positionType, is optional. It sets the element's positioning scheme. positionType is a string that can be either 'static', 'fixed', 'relative', 'sticky', 'initial', or 'inherit'.
If no arguments passed, as in myElement.position(), the method returns the element's position in an object, as in { x: 0, y: 0 }.
Applies a style to the element by adding a CSS declaration.
The first parameter, property, is a string. If the name of a style property is passed, as in myElement.style('color'), the method returns the current value as a string or null if it hasn't been set. If a property:style string is passed, as in myElement.style('color:deeppink'), the method sets the style property to value.
The second parameter, value, is optional. It sets the property's value. value can be a string, as in myElement.style('color', 'deeppink'), or a p5.Color object, as in myElement.style('color', myColor).
Adds an attribute to the element.
This method is useful for advanced tasks. Most commonly-used attributes, such as id, can be set with their dedicated methods. For example, nextButton.id('next') sets an element's id attribute. Calling nextButton.attribute('id', 'next') has the same effect.
The first parameter, attr, is the attribute's name as a string. Calling myElement.attribute('align') returns the attribute's current value as a string or null if it hasn't been set.
The second parameter, value, is optional. It's a string used to set the attribute's value. For example, calling myElement.attribute('align', 'center') sets the element's horizontal alignment to center.
Removes an attribute from the element.
The parameter attr is the attribute's name as a string. For example, calling myElement.removeAttribute('align') removes its align attribute if it's been set.
Returns or sets the element's value.
Calling myElement.value() returns the element's current value.
The parameter, value, is an optional number or string. If provided, as in myElement.value(123), it's used to set the element's value.
Shows the current element.
Hides the current element.
Sets the element's width and height.
Calling myElement.size() without an argument returns the element's size as an object with the properties width and height. For example, { width: 20, height: 10 }.
The first parameter, width, is optional. It's a number used to set the element's width. Calling myElement.size(10)
The second parameter, 'height, is also optional. It's a number used to set the element's height. For example, callingmyElement.size(20, 10)` sets the element's width to 20 pixels and height to 10 pixels.
The constant AUTO can be used to adjust one dimension at a time while maintaining the aspect ratio, which is width / height. For example, consider an element that's 200 pixels wide and 100 pixels tall. Calling myElement.size(20, AUTO) sets the width to 20 pixels and height to 10 pixels.
Note: In the case of elements that need to load data, such as images, wait to call myElement.size() until after the data loads.
Removes the element, stops all audio/video streams, and removes all callback functions.
Calls a function when the user drops a file on the element.
The first parameter, callback, is a function to call once the file loads. The callback function should have one parameter, file, that's a p5.File object. If the user drops multiple files on the element, callback, is called once for each file.
The second parameter, fxn, is a function to call when the browser detects one or more dropped files. The callback function should have one parameter, event, that's a DragEvent.
Makes the element draggable.
The parameter, elmnt, is optional. If another p5.Element object is passed, as in myElement.draggable(otherElement), the other element will become draggable.