多个 HTML 背景颜色的 Javascript 变量

Question

并在此先感谢您提供的所有帮助。我在互联网上四处查看，没有发现其他人遇到我的具体问题。

我在网站上运行 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>

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

Answer 1

不要在这种情况下使用 document.write()，如果有的话。

您实际上是在询问是否可以将元素绑定(bind)到变量，而这在 Javascript 和 DOM 中是行不通的。您必须创建一个函数来执行此操作，或使用函数文字，或仅使用 Javascript 语句，如下所示(您不需要 javascript: 前缀):

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

应该为你做。