Можно ли вставить случайное CSS значение из масива?

Question

[tereshock98]

У меня есть массив из значений js

var square = "background: linear-gradient(currentColor, currentColor) 50% / 50% 50% no-repeat";
var rhombus = "background: linear-gradient(100deg, transparent 30%, currentColor 30%, currentColor 70%, transparent 70%) 50% / 90% 40% no-repeat";

var figures = [square, rhombus];

Есть так же генератор случайного элемента из массива

var randFigure = Math.floor(Math.random() * figures.length);

Как сделать так, чтобы CSS для блока был случайным?

Такие наработки у меня:
$(".particle").css(figures[randFigure]);

Answer 1

[0xD34F]

$('.particle').attr('style', figures[randFigure]);

Comments

[tereshock98]

А как можно сделать, чтобы в атбрибут style добавлялось несколько разных значений? Типа

$('.particle').attr('style', figures[randFigure], position[randpos]);

[0xD34F]

tereshock98,

$('.particle').attr('style', [ figures[randFigure], position[randpos] ].join(';'));

Answer 2

[Антон Неверов]

Ответ верный выше. Больше теории:
У вас в переменных CSS-правила в inline-виде. Функция .css() может вернуть значение или, с помощью обекта типа

{
border: '1px',
color: '#fff'
}

Установить его. У вас задан изначально не объект, поэтому в вашем случае просто эти строки из переменных подставляются в атрибут элемента style='...'.

Comments

[tereshock98]

А как можно сделать, чтобы в атбрибут style добавлялось несколько разных значений? Типа

$('.particle').attr('style', figures[randFigure], position[randpos]);

[Антон Неверов]

Вы подставляете строку. Как минимум, если у вас есть переменные:

var first = 'border: 1px;';
var second = 'color: #FFF;';

То вы можете объединить эти строки в одну и подставить в style:
$('.particle').attr('style', first + second);
Но важно, чтобы вы не забывали про ; после каждого правила. Но я бы рекомендовал использовать .css() с объектом стилей. Это надёжнее.