当前位置: 首页>>代码示例>>用法及示例精选>>正文


p5.js selectAll()用法及代码示例

selectAll()函数用于搜索具有给定id,类或标签名称的元素,并将其作为p5.Element数组返回。它的语法类似于CSS选择器。可选参数可用,可用于在给定元素内搜索。此方法返回页面上存在的并与选择器匹配的所有元素。

用法:

selectAll(name, [container])

参数:该函数接受上述和以下所述的两个参数:


  • name:这是一个字符串,表示必须搜索的元素的ID,类或标记名。
  • container:这是一个可选参数,表示要在其中搜索的元素。

返回值:它返回一个p5.Element数组,其中包含所有匹配的元素。

下面的示例说明了p5.js中的selectAll()函数:

例:

function setup() { 
  createCanvas(600, 50); 
  textSize(20); 
  text("Click to select the paragraphs"+ 
       " and change their position.", 0, 20); 
  
  para1 = createP("This is paragraph 1"); 
  para2 = createP("This is paragraph 2"); 
  para3 = createP("This is paragraph 3"); 
} 
  
function mouseClicked() { 
  
  // Select all the 
  // paragraph elements 
  selectedParas = selectAll("p"); 
  
  // Loop through each of them 
  for (i = 0; i < selectedParas.length; i++) { 
  
    // Change the position of 
    // of the elements 
    selectedParas[i].position(100, 100 + i * 25); 
  } 
}

输出:

在线编辑:

环境设置:

参考: https://p5js.org/reference/#/p5/selectall



相关用法

注:本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | selectAll() Function。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。