自定义聊天框颜色

Custom chat box colour

本文关键字：颜色 聊天 自定义      更新时间：2023-09-26

我有一个聊天应用程序，它将消息附加到屏幕上随机空间的无序列表中（参见示例https://i.stack.imgur.com/O9MOb.jpg)。

现在所有的信息都显示在橙色背景前。我想让用户通过点击5种特定背景颜色的小框来进行选择。

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

我知道我需要将这些颜色框与"li背景"联系起来，但我不确定如何联系。你会使用Javascript来执行这样的功能吗？一旦选择了特定的颜色框，"li背景"就会变为该颜色？如果是，怎么办？

欢迎提出任何想法！

我会为颜色使用不同的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());
});

FIDDLE

您可以使用jquery来做到这一点……首先，我们制作fiv的小div颜色，并为其提供颜色名称的class。然后，我们使用Jquery来动画李的背景。这是代码…-----

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/---演示

相关文章：