Как я могу добавить правило CSS к определенному элементу? ⇐ CSS

[Anonymous]

Я пытаюсь добавить два класса в тег div. Я использую переменные со случайными значениями для расчета положения тегов div. Я не знаю, как создать класс с этими рандомизированными числами, если это вообще возможно, может ли кто-нибудь мне помочь?
Я действительно не знаю, с чего начать, но вот мой код

Код: Выделить всё

let xValues = []
let yValues = []
let coordinates = []

for (let i = 0; i < 10; i++) {
xValues.push(i)
yValues.push(i)
}
let x1 = xValues[Math.floor(Math.random()*xValues.length)]
let x2 = xValues[Math.floor(Math.random()*xValues.length)]
let x3 = xValues[Math.floor(Math.random()*xValues.length)]
x1 = x1 * 50
x2 = x2 * 50
x3 = x3 * 50
let y1 = yValues[Math.floor(Math.random()*yValues.length)]
let y2 = yValues[Math.floor(Math.random()*yValues.length)]
let y3 = yValues[Math.floor(Math.random()*yValues.length)]
y1 = y1 * 50
y2 = y2 * 50
y3 = y3 * 50

console.log("("+x1+", "+y1+") "+"("+x2+", "+y2+") "+"("+x3+", "+y3+")")

Код: Выделить всё

html, body {
height: 100%;
width: 100%;
background-color: grey;
}
.bg{
height: 500px;
width: 500px;
background-color: white;
position: relative
}
.obst {
background-color: red;
height: 50px;
width: 50px;
display: inline-block;
}
#obst1 {
position: absolute;
top: 300px;
left: 450px;
}
#obst2 {
position: absolute;
top: 200px;
left: 200px;
}
#obst3 {
position: absolute;
top: 100px;
left: 300px;
}

Код: Выделить всё

Подробнее здесь: [url]https://stackoverflow.com/questions/74230179/how-could-i-add-a-css-rule-to-a-specific-element[/url]