Как изменить CSS элемента HTML с выводом функции Javascript?

Я хотел бы сделать страницу отображать случайное изображение при загрузке, как это в будущем, но вместо того, чтобы возвращать «<img src = "image.png">», который нужно добавить с «документ.write (imageTag ())», я хотел бы использовать setAttribute () или element.style.backgroundImage (), чтобы изменить CSS блока div, который я выделил с помощью вывод случайного изображения функцией Javascript.

---

For instance, I am trying to change the background-color of a simple div block, in order to "change the css with the output of a Javascript function." (original question)

html:

<script>
  document.getElementById("coloredBlock").style.backgroundColor = color();
  </script>

CSS:

#coloredBlock {
  background-color: yellow;
  height: 100px;
  width: 100px;
} 

Javascript:

function color(){
return "purple";
}

Я ищу, чтобы этот блок был фиолетовым. кодовый ключ того, что я имею в виду.

---

Also, my setAttribute() doesn't seem to work, only element.style:

<script>
document.getElementById("coloredBlock").style.backgroundColor = "green";
  </script>

работает и блок становится зеленым, но

<script>
document.getElementById("coloredBlock").setAttribute('background-color', 'blue')
  </script>

не работает, и блок остается желтым.

---

Я уверен, что ответ как-то связан с тем, как "document.getElementById (" colourBlock "). Style.backgroundColor = color (); " написано.