Реализация JS-кода для изменения элементов CSS ⇐ CSS

[Anonymous]

Это отрывок кода из моей программы, и я хотел бы знать, как изменить его, чтобы настроить верхнее и левое значения, используя переменные JS в теге, который находится над ним, чтобы рандомизировать его положение в Сетка 9x9. Я делаю из этого игру.

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

#backgroundColor {
background-color: rgba(211, 233, 254, 0.779);
margin-top: 5%;
}

#content {
text-align: center;
width: 100%;
}
/* I want to change the top and left values to correspond with JS variables. */
h1 {
position: absolute;
top: 1.75%;
/* Alter values in a grid by 10.75. Make a varible in , go from 1.75-87.75 */
left: 27.25%;
/* Alter values in a grid by 5.5. Make a variable in , go from 27.25-71.25 */
color: rgb(47, 0, 0)
}

div {
position: relative;
text-align: center;
}

image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

.numbers {
font-family: monospace;
font-size: xx-large;
font-weight: normal;
font: Menlo;
}

.title {
font-family: monospace;
font-style: italic;
font-weight: lighter;
font-size: xx-large;
}

.subtitle {
font-family: monospace;
font: Courier;
font-size: large;
font-weight: lighter;
}

Я пробовал использовать следующий JS-код:

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

"use strict";
function getNumCoords(ifX, ifY) {
const numGridMax = 8;
var yPos = Math.floor(Math.random()*numGridMax);
var xPos = Math.floor(Math.random()*numGridMax);
if (ifX === 1) {
return (xPos*5.5)+27.25;
}
if (ifX === 1) {
return (yPos*10.75)+1.75;
}
}
var outputX = getNumCoords(1, 0) + "%";
var outputY = getNumCoords(0, 1) + "%";
var number = document.getElementById("random");

Чтобы изменить элементы CSS.

Подробнее здесь: https://stackoverflow.com/questions/781 ... s-elements