将Javascript变量转换为多个HTML背景颜色

并提前感谢您提供的一切帮助。我在网上查过了，没有发现其他人有我的问题

我在一个网站上运行Wordpress，有两个div，我想让用户能够更改使用Javascript/HTML的颜色。背景颜色可以在CSS中指定，也可以在HTML中指定。我是Javascript的新手，但我希望能够创建两个Javascript变量，例如：

var headercolor="3366FF";
var maincolor="FFFFFF";

然后在HTML中，例如，指定背景颜色作为变量

<div id="header" style="background-color:javascript:document.write(headercolor);">
CONTENT HERE
</div>
<div id="main" style="background-color:javascript:document.write(maincolor);">
CONTENT HERE
</div>

满足于此
满足于此

由于Javascript变量是给定的默认值，因此在第一次加载页面时，它们会显示这些值，但当用户单击链接时，颜色会发生变化

<a href="#" onclick=javascript:var maincolor="3366FF";>Click here to get a blue main background!</a>

基本上，我想知道这些是否可行。如果是，我怎么做？如果没有，感谢您抽出时间阅读本文，请让我知道这是无法完成的，或者可以通过其他方式完成。

如果有，请不要在此上下文中使用document.write（）

实际上，您在问是否可以将元素绑定到变量，而这在Javascript和DOM中是行不通的。您必须创建一个函数来执行此操作，或者使用函数文本，或者只使用Javascript语句，如下所示（您不需要

Javascript:

前缀）：

我应该为你做这件事

onclick="document.getElementById('main').style.backgroundColor='#3366FF'"