变色龙网站，使用颜色选择器更改网站的颜色

Question

我想学习如何设计一个网站，其中背景和图像的颜色将由用户改变。在msn，yahoo等网站中，颜色只能在绿色，蓝色，白色等4种颜色中改变一种颜色，但在该图像中没有投影或渐变叠加等效果。然而，我想改变图像的颜色，应用了投射阴影，渐变叠加等效果。此外，对于每种颜色。就像变色龙一样。

我可以在顶部的右边放一个文本链接。当用户单击此链接时，可以打开类似Photoshop的颜色选择器。颜色选择器根据所选颜色生成十六进制代码。网站的颜色将更改为用户选择的颜色。

我使用JavaScript DOM更改了透明的图像背景颜色。图像中透明区域的颜色将与包含此图像的div标签的背景颜色相同。但是，如果图像有阴影、覆盖等效果，则更改颜色将被禁用。

我怎么做，我将使用哪种技术，jQuery，Ajax？我如何创建一个网站，哪种颜色可以change.How我创建一个网站，哪种颜色将由用户改变。

就像变色龙..。

Answer 1

嗯，如果你刚开始没有多少知识，这可能需要一段时间才能实现。

首先，我的建议是有一个javascript，它根据用户的选择改变body元素的类。因此，假设我访问该页面，<body>标记没有类，并且使用默认的css。

然后，我点击链接，将其设置为红色。使用javascript或jquery将body类命名为"red-body“。

在你的样式表中有css，它只对这个类元素的子元素有效。

Html:
<a href="" class="go-red">Go Red</a>

jQuery
$('.go-red').click(function(){$('body').removeClass();$('body').addClass('red-body');});

所以如果你有像这样的代码：

#navigation li{color:#000;}
.red-body #navigation li{color: #af000;}

这将使这成为可能。这意味着您只需使用一个样式表就可以完成所有工作，我认为这是最好的方法。

有许多方法可以存储用户的选择。最简单的方法之一是在他们的浏览器中设置cookie。您可以使用javascript来完成此操作，下面是来自w3schools：http://www.w3schools.com/JS/js_cookies.asp的介绍