p5.Element class() Method

The class() method of p5.Element in p5.js is used to set or return the classes of the element. When no class is specified as a parameter, it returns the current classes of the element. An element can have multiple classes assigned to it. Also, one class can be specified to multiple elements on the page.

Syntax:

class(class)

Parameters: This function accepts a single parameter as mentioned above and described below

• class: It is a string that denotes the class of the element.

Example: The example below illustrates the class() method in p5.js.

Javascript

function setup() {
  createCanvas(550, 300);
  textSize(18);

  text("Click on the button to add the given " +
       "class(es) to the element", 20, 20);

  setBtn =
    createButton("Create new Element with given classes");
  setBtn.position(30, 40);
  setBtn.mouseClicked(createNewElement);

  setBtn =
    createButton("Show Last Element class");
  setBtn.position(300, 40);
  setBtn.mouseClicked(showClasses);

  class_name = createInput('tmpClass');
  class_name.position(30, 80);
}

function createNewElement() {
  clear();

  // Create a new p5.Element
  tmpElement = createElement("div");

  // Get the class to set
  let classToSet = class_name.value();

  // Set the class of the element
  tmpElement.class(classToSet);

  text("Class set with the names: " +
       classToSet, 30, 120);

  text("Click on the button to add the given " +
       "class(es) to the element", 20, 20);
}

function showClasses() {
  clear();

  // Get the classes of the element
  let setClasses = tmpElement.class();

  // Display the classes
  text("The classes of the element are: " +
       setClasses, 30, 120);

  text("Click on the button to add the given " +
       "class(es) to the element", 20, 20);
}

Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Element/class