Javascript 添加具有不同颜色的Gridster小部件

我有用于加载小部件的JavaScript代码。每次我添加带有“添加”按钮的小部件时，它都以CSS中定义的默认颜色（蓝色）加载

我想加载不同颜色的小部件。我想给用户一个颜色选择（下拉列表），根据选择的颜色，小部件应该加载

如何在JavaScript中实现这一点

var-gridster；
gridster=$（“.gridster ul”）.gridster({
小部件基础尺寸：[100100]，
小部件_页边距：[5,5]，
助手：“克隆”，
调整大小：{
已启用：true
}
}).数据（“gridster”）；
$（文档）。在（“单击”、“.delete”按钮”上，函数（）{
var gridster=$（“.gridster ul”）.gridster（）.data（'gridster'）；
remove_小部件（$（this.parent（））；
});
$（文档）。在（“单击”，“添加”按钮）上，函数（）{
var gridster=$（“.gridster ul”）.gridster（）.data（'gridster'）；
添加小部件（“
-
”，1,1）；
});


-
1.

-
2.

-
3.

-
4.

-
5.

-
6.

-
7.

-
8.

-
9

-
10

-
11

-
12

添加小部件
一种方法是在添加小部件时从
列表中获取所选值。构建一个类名来引用所选颜色的CSS样式，并将该类应用于正在添加的小部件


var-gridster；
var$color_picker=$（“#color_picker”）；
gridster=$（“.gridster ul”）.gridster({
小部件基础尺寸：[50,50]，
小部件_页边距：[5,5]，
助手：“克隆”，
调整大小：{
已启用：true
}
}).数据（“gridster”）；
$（'.gridster'）。在（“单击“，”.delete按钮），函数（）上{
remove_小部件（$（this.parent（））；
});
$（“.add按钮”）。在（“单击”，函数（）{
//获取选定的颜色值
var color=$color_picker.val（）；
//构建小部件，包括所选颜色值的类
var$widget=$（“
”{
“类”：“颜色”+颜色
})
.附加（$（''）{
“类”：“删除按钮”，
'文本'：'-'
}))
.附加（$（''）{
“文本”：“文本”
}));
//将小部件添加到网格
add_小部件（$widget，1，1）；
});
.gridster{
利润率：0.03em；
}
.删除按钮{
浮动：对；
}
.gridster.gs-w.color_浅蓝色{
背景颜色：浅蓝色；
}
.gridster.gs-w.color_浅绿色{
背景颜色：浅绿色；
}
.gridster.gs-w.color_鲑鱼{
背景颜色：鲑鱼；
}


-
1.

-
2.

-
3.


浅绿色
浅蓝色
鲑鱼
添加小部件
CSS中什么东西使默认颜色变成蓝色？它在第39行：
.gridster.gs-w{background:#61A9CF；..
顺便说一句，您可以使用浏览器的CSS检查器查看DOM元素样式及其定义位置。例如，在和中。哦，这太棒了！！