获取 div 的 p5.js 宽度

Question

我正在自学 JavaScript 所以我正在使用 p5.js

做类似网站的事情

问题是 div 持有我的 canvas 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() select 该元素。任何 CSS selector 都是该函数的有效第一个参数。例如。以下将 select <body> 标签：

document.querySelector('body')

一旦你有一个元素 selected，你可以通过访问 clientWidth 属性来获得它的宽度。例如。下面告诉你 <body> 标签的宽度：

document.querySelector('body').clientWidth

因此只需将 body 替换为 CSS select 或者您想要 select 的元素。

Answer 2

您不需要为此使用 JQuery。看一下 P5.dom library，它提供了一系列用于操作 P5.js.

中的 HTML 元素的功能

我不确定你到底想做什么，但这是一个简单的例子。如果我们在页面上有一个 ID 为 myId 的 div，那么要获得它的宽度，我们可以使用 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);

获取 div 的 p5.js 宽度

Get div's width for p5.js

javascript

jquery

p5.js