p5.js | attribute() Function

The attribute() function is used to add a new attribute or change the value of an existing attribute on the specified element. If the attribute does not specify any value it returns the value of the given attribute, or null if the attribute is not set.

Note: This function requires the p5.dom library. So add the following line in the head section of the index.html file.

<script language=”javascript” type=”text/javascript” src=”path/to/p5.dom.js”></script>

Syntax:

attribute()

or

attribute( attr, value )

Parameters:

• attr: This parameter holds the attribute name which need to set.
• value: This parameter holds the value to assign to that attribute.

Return Value: This function returns the value of attribute in string format.

Below example illustrates the attribute() function in p5.js:

Example:

function setup() {

    // Canvas size 400*400
    createCanvas(400, 200);

    // Set background color
    background('green');

    // Create an input element
    var input_val = createInput('');

    // Set the attribute and its value
    input_val.attribute('value', 'Welcome to GeeksforGeeks');

    // Set the position of div element
    input_val.position(60, 80);

    // Set width of input field
    input_val.style('width', '250px');

    // Set font-size of input text
    input_val.style('font-size', '20px');
}

Output: