如何切换到 Click Square 的背景颜色？答案

【问题标题】：How is the background color to switch to Click Square?如何切换到 Click Square 的背景颜色？
【发布时间】：2015-11-23 22:04:05
【问题描述】：

我有这个代码：

<body>

<DIV id="div1" style="position:absolute;
      top:0px;left:0px;width:320px;height:210px;">
    <DIV style="background-color:#DB97F2;position:absolute;top:10px;left:10px;
                width:90px;height:90px"></div>
    <DIV style="background-color:blue;position:absolute;top:10px;left:110px;
                width:90px;height:90px"></DIV>
    <DIV style="background-color:yellow;position:absolute;top:10px;left:210px;
                width:90px;height:90px"></DIV>
    <DIV style="background-color:#DB5432;position:absolute;top:110px;left:10px;
                width:90px;height:90px"></DIV>
    <DIV style="background-color:red;position:absolute;top:110px;left:110px;
                width:90px;height:90px"></DIV>
    <DIV style="background-color:green;position:absolute;top:110px;left:210px;
                width:90px;height:90px"></DIV>
</DIV>

我想通过点击彩色方块来更换壁纸。 see picture

背景颜色应该是每个方块的颜色。example: clicking on the blue square

谁能帮帮我？

【问题讨论】：

嗨。要使您的 html 代码具有交互性，您可能需要查看 Javascript。网上有很多很棒的教程！但是，可能有用的特定 javascript 资源将是 jQuery。祝你好运！
您好，感谢您的评论。不幸的是，我被告知我不能使用 jQuery。
这闻起来很像作业。我们不想剥夺您解决问题的快感，但 HTML5 中的提示将涉及 events
好吧。你有什么限制？你不能使用 javascript，或者只使用 jQuery？
确实是我需要解决的一个活动。口号说不要只使用 jQuery 。我不想解决活动。我只需要知道我可以使用，因为然后说“将事件处理函数放在哪里？”

标签： html colors background

【解决方案1】：

您可能想研究 javascript 和它的框架 JQuery 以在您的网页中添加交互性，但您已经事先了解任何 JQuery，这就是您将如何做到的：

$('#yourSquare').click(function () {
    $('body').css("background-color", "blue"); // Just add any color you wis
});

对所有会更改页面背景颜色的方块执行此操作，只需更改选择器中的 div 以与您的方块相对应。

如果你想学习 javascript 的链接： W3Schools

希望这有帮助:)

【讨论】：