自定义聊天框颜色

Question

我有一个聊天应用程序，它将消息附加到屏幕上随机空间上的无序列表中(请参阅示例http://imgur.com/QrRQvV6)。

现在，所有消息都显示在橙色背景的前面。我想让用户在5个特定的背景颜色之间选择通过点击该颜色的一个小方框。

li {

 background: #E99D41;
 font-family:  Helvetica, sans-serif;
 color: #FFF;
   } 

我知道我需要将这些颜色框链接到"li背景“，但我不确定如何链接。你会使用Javascript来执行这样的功能吗?一旦选择了特定的颜色框，"li背景“就会变成该颜色？如果是这样的话，是怎么做的？

任何想法都很受欢迎！

Answer 1

你可以使用jquery来做so....First，我们制作了五个小的颜色div，并给它赋予了它们的颜色name.Then类，我们使用Jquery来制作li的背景颜色。这是代码...

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>choose color</p>
<div class="red" style="width:20px;height:20px;background-color:red"></div>
<div class="blue" 
style="width:20px;margin-top:10px;height:20px;background- color:blue">     
</div>
<div class="green" 
style="width:20px;margin-top:10px;height:20px;background- color:green"></div>
<div class="yellow" 
style="width:20px;margin-top:10px;height:20px;background-color:yellow"></div>
<div class="black" 
style="width:20px;height:20px;margin-top:10px;background-color:black"></div>
<ul style="margin-top:20px;background-color:orange">
<li>tea</li>
<li>coffee</li>
<li>star</li>
<li>one</li>
<li>two</li>
</ul>

Javascript

var main=function(){
$(".red").on("click", function() {
$("ul").css("background", "red");
})
$(".blue").on("click", function() {
$("ul").css("background", "blue");
})
$(".green").on("click", function() {
$("ul").css("background", "green");
})
$(".yellow").on("click", function() {
$("ul").css("background", "yellow");
})
$(".black").on("click", function() {
$("ul").css("background", "black");
})
}
$(document).ready(main) 

http://jsfiddle.net/vashuStarPro/av52m29m/ -演示

Answer 2

我会对颜色使用不同的CSS类，并根据用户的选择更改类。例如：

HTML

<ul>
    <li class="black">message</li>
    <li class="black">message</li>
    <li class="black">message</li>
    <li class="black">message</li>
    <li class="black">message</li>
</ul>
<input id="red" type="radio" value="red" name="colors" />
<label for="red">red</label>
<input id="blue" type="radio" value="blue" name="colors" />
<label for="blue">blue</label>
<input id="black" type="radio" value="black" name="colors" />
<label for="black">black</label>

CSS

li {
    color: white;
}
li.black {
    background-color: black;
}
li.red {
    background-color: red;
}
li.blue {
    background-color: blue;
}

JavaScript

$("input[type=radio]").on("change", function () {
    $("li").removeClass("black red blue").addClass($(this).val());
});