如何使用Javascript函数的输出更改HTML元素的CSS？

Question

我希望将来制作一个页面display a random image on load like this，但不要返回要添加“ ”的页面> document.write（imageTag（））”，我想使用 setAttribute（）或 element.style.backgroundImage（）来更改CSS我已将div块的一部分放在一边，并保留了随机图片Javascript函数的输出。

---

例如，我试图更改一个简单的div块的背景颜色，以便“使用Javascript函数的输出来更改CSS”。 （原始问题）

html：

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

CSS：

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

Javascript：

function color(){
return "purple";
}

我正在寻找的输出是该块为紫色。我的意思是codepen。

---

另外，我的setAttribute（）似乎不起作用，只有element.style:

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

有效，该块变为绿色，但是

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

不起作用，该块仍为黄色。

---

我确定答案与“ document.getElementById（“ coloredBlock”）。style.backgroundColor = color（）;有关。 “被写。