有没有办法使用纯 JavaScript 而不使用 HTML/CSS 来设置 p5js 滑块的样式？

Question

我在 javascript 中有一些滑块（特别是使用 p5.js 库），需要为其添加一些样式（添加标签并进行一些着色）。是否可以在 javascript 中执行此操作而不使用 HTML 和 CSS？

Answer 1

p5 滑块是 p5 Elements，可以使用 Element.style 和 Element.class 等函数设置样式。在这种情况下，您可以直接使用类似 slider.style('background', 'red');

的样式设置滑块样式

如果您想设置 伪元素 的样式（就像滑块上的实际选项卡），这似乎有点棘手，尤其是没有 CSS。您可以阅读有关各种方法的更多信息 here. If you want a solution that runs in only JavaScript, you could add a class then dynamically insert a stylesheet into DOM, as per this answer.

编辑：添加标签

好像p5.dom没有创建label个元素的功能，但是可以用createDiv创建div个元素，然后将元素组合在一起.所以如果你想在左边有一个标签，你可以这样做：

label = createDiv('Red');
label.position(30, 30);  
slider = createSlider(0, 255, 100);
slider.parent(label);

如果你想要右边的标签，那就有点棘手了：

group = createDiv('');
group.position(30, 30);  
slider = createSlider(0, 255, 100);
slider.parent(group);
label = createSpan('Red');
label.parent(group);

参考文献：

https://p5js.org/reference/#/p5.Element
Changing CSS pseudo-element styles via JavaScript

有没有办法使用纯 JavaScript 而不使用 HTML/CSS 来设置 p5js 滑块的样式？

Is there a way to style p5js sliders using pure JavaScript and without HTML/CSS?

javascript

slider

p5.js

编辑：添加标签