Question

我正在学习自己的JavaScript，因此我正在使用p5.js做类似网站的事情

问题是div握着我的p5.js画布，我希望它能够响应。在此canvas中，确实有一个需要div的宽度和高度才能构建的对象。

问题是我不知道如何获取此信息。我尝试使用jQuery，但是我不知道如何从jQuery函数中提取值，也不知道这是否是过度的方法。

//--------------------------constant--------------------------------------------
//Canvas

const DROPNUMBER = 1500;

//--------------------------classe---------------------------------------------
function Drop(width, heigth) {

  //declaring and setting drop's attribute
  this.spawn = function(width) {

    //size and position
    this.x = Math.random() * -width*1.5;
    this.y = Math.random() * heigth;
    this.size = Math.random() * 20 ;

    //color
    this.colorR = 138 + Math.random() * 50;
    this.colorV = 43 + Math.random() * 50;
    this.colorB = 226 + Math.random() * 50;
    this.colorA = Math.random() * 127 +50;

    //speed and landing
    this.speed = Math.random();
    this.hasLanded = false;
  }

  //call func to set the attribute
  this.spawn(width);

  //make the drop falls
  this.fall = function() {
    //if the drop can fall
    if (this.x < width) {
      this.x = this.x + this.speed;
      this.speed = this.speed + 0.01;

      //if the drop did land
      if (this.y + this.size > width && this.hasLanded == false) {
        this.hasLanded = true;
      }
    }

    //if the drop did fall
    else {
      this.spawn(width);
    }
  }

  //display the drop
  this.display = function() {
    noStroke();
    //Some kind of purple color
    fill(this.colorR, this.colorV, this.colorB, this.colorA);
    rect(this.x, this.y, this.size, this.size)
  }
}


//--------------------------setup---------------------------------------------

function setup() {
  clientHeight = document.getElementById('header').clientHeight;
  clientWidth = document.getElementById('header').clientWidth;
  canvas = createCanvas(clientWidth, clientHeight);
  canvas.parent('sketch-holder');
    window.canvas = canvas;
}


//-------------------------Variable---------------------------------------------

  var n = DROPNUMBER;
  var drops = new Array();


  //creating an array of drop for the rain
  for (let i = 0; i < n; i++) {

    //800 800 is height and the width that i want to change !
    drops.push(new Drop(800,800)); 

  }

//--------------------------draw------------------------------------------------
function draw() {
  background(48, 64, 96);
  //each drop
  for (let i = 0; i < n; i++) {
    //Make them falling
    drops[i].fall();
    //display the result
    drops[i].display();

  }
}

该代码仅显示从绘图或设置功能中构造出水滴（需要高度和宽度的对象）。我也已经在Stack Overflow上搜索了此类问题。

Answer 1

要获取JavaScript中元素的宽度，可以使用document.querySelector()选择该元素。任何CSS选择器都是该函数的有效第一个参数。例如。以下将选择<body>标签：

document.querySelector('body')

一旦选择了元素，就可以通过访问clientWidth属性来获得其宽度。例如。以下内容告诉您<body>标签的宽度：

document.querySelector('body').clientWidth

因此，只需将body替换为您要选择的元素的CSS选择器即可。

Answer 2

您不需要为此使用JQuery。看一下P5.dom library，它提供了许多功能来处理P5.js中的HTML元素。

我不确定您要做什么，但这是一个简单的示例。如果页面上有div，ID为myId的{{1}}，则可以使用P5.dom来获得其宽度：

var myDiv = select('myId');
var myWidth = myDiv.style.width;
console.log('width: ' + myWidth);

Answer 3

使用常规的DOM js可以正常工作：

let b = document.getElementById("parentElement");
let w = b.clientWidth;
let h = b.clientHeight;
console.log(w, h);

获取p5.js的div宽度

3 个答案: