Wie könnte ich einem bestimmten Element eine CSS-Regel hinzufügen? ⇐ CSS

[Anonymous]

Ich versuche, einem div-Tag zwei Klassen hinzuzufügen. Ich verwende Variablen mit zufälligen Werten, um die Position der div-Tags zu berechnen. Ich weiß nicht, wie ich eine Klasse mit diesen Zufallszahlen erstellen soll. Wenn es überhaupt möglich ist, könnte mir jemand helfen?
Ich weiß nicht wirklich, wo ich anfangen soll, aber hier ist mein Code

Code: Select all

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+")")

Code: Select all

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

Code: Select all