📜  p5.Element class() 方法

📅  最后修改于: 2022-05-13 01:56:29.813000             🧑  作者: Mango

p5.Element class() 方法

p5.js 中 p5.Element 的class()方法用于设置或返回元素的类。当没有指定类作为参数时,它返回元素的当前类。一个元素可以有多个类分配给它。此外,可以为页面上的多个元素指定一个类。

句法:

class(class)

参数:此函数接受如上所述和如下所述的单个参数

  • class:它是一个字符串,表示元素的类。

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

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);
}


输出:

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