Есть ли способ стилировать слайдеры p5js, используя чистый JavaScript и без HTML / CSS? - PullRequest
Новая
       6

Есть ли способ стилировать слайдеры p5js, используя чистый JavaScript и без HTML / CSS?

0 голосов
/ 09 июня 2018

У меня есть несколько ползунков в javascript (в частности, с использованием библиотеки p5.js), для которых нужно добавить некоторые стили (добавить метки и немного покрасить).Возможно ли это сделать в javascript без использования HTML и CSS?

1 Ответ

0 голосов
/ 10 июня 2018
Ползунки

p5 имеют значение p5 Elements и могут быть стилизованы с помощью таких функций, как Element.style и Element.class.В этом случае вы можете напрямую стилизовать слайдер с помощью чего-то вроде slider.style('background', 'red');

. Если вы хотите стилизовать псевдоэлемент (как фактическая вкладка на слайдере), это выглядит какнемного сложнее, особенно без CSS.Вы можете прочитать больше о различных подходах здесь .Если вам нужно решение, которое работает только на JavaScript, вы можете добавить класс, а затем динамически вставить таблицу стилей в DOM согласно этому ответу .

Редактировать: добавление меток

Не похоже, что в p5.dom есть функция для создания label элементов, но вы можете создавать div элементы, используя createDiv, а затем комбинировать элементы вместе.Поэтому, если вы хотите, чтобы надписи на левой стороне, вы можете сделать что-то вроде: 

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);

Ссылки:

...