p5.Element addClass() 方法

p5.js 中 p5.Element 的addClass()方法用于将指定的类添加到元素中。一个元素可以有多个类分配给它。此外，可以为页面上的多个元素指定一个类。

句法：

addClass(class)

参数：此函数接受如上所述和下文所述的单个参数。

• class：它是一个字符串，表示要添加的类。

示例：下面的示例说明了 p5.js 中的addClass()方法。

Javascript

function setup() {
  createCanvas(550, 300);
  textSize(18);
 
  text("Click on the buttons to add the given " +
       "class to the element", 20, 20);
 
  setBtn =
    createButton("Add given class to element");
  setBtn.position(30, 40);
  setBtn.mouseClicked(addNewClass);
 
  setBtn =
    createButton("Show current classes");
  setBtn.position(300, 40);
  setBtn.mouseClicked(showClasses);
 
  class_name = createInput('class1');
  class_name.position(30, 80);
 
  // Create a new p5.Element
  tmpElement = createElement("div");
}
 
function addNewClass() {
  clear();
 
  // Get the class to set
  let classToSet = class_name.value();
 
  // Set the class of the element
  tmpElement.addClass(classToSet);
 
  text("Class added with name: " +
       classToSet, 30, 120);
 
  text("Click on the button to add the given " +
       "class 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 to the element", 20, 20);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5.Element/addClass