如何将 class 应用于在 p5.js 中创建的 P 标签？

Question

I am generating an element using p5.js.

How can I apply the basic_font class to this p element?

*.js (p5.js)

createElement('p', "Number of columns:").parent(div);

*.css

.basic_font {
    color: white;
    font-size: larger;
    font-family: 'Lato', sans-serif;
    justify-content: center;
}

Answer 1

You can use classList to add a class (in this case basic_font) and its styles to your element. parent is the parent element.

 var el = document.createElement('p'); el.innerHTML = 'Number of Columns'; el.classList.add('basic_font'); parent.appendChild(el);

See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

You can also use setAttribute on class .

el.setAttribute('class', 'basic_font');

Keep in mind also that the way you added innerHTML to the element is incorrect. You must specify it separately.

You mentioned you are using p5.js which appears to have a class() method for adding classes to created elements. See https://p5js.org/reference/#/p5.Element . Try using it as follows:

createElement('p', "Number of columns:").parent(div).class('basic_font');