改变 jQuery UI 按钮的颜色

问题描述

有没有一个简单的方法来改变一个 jQuery UI 按钮的颜色？文件中不建议修改 css，反正这样做很棘手。他们说：「我们建议您使用 ThemeRoller 工具来创建和下载易于构建和维护的自定义主题。」 我了解如何更改主题，但是如何在同一页面上获得不同的彩色按钮？

最佳解决方法

我只是这样做：用新的颜色按钮创建一个新的主题; 复制..hard .. 和..soft … 渐变文件从新的主题图像文件夹; 重命名它们，以免将它们与主题混淆; 最后添加样式到按钮。这适合渐变和颜色…

我刚刚尝试了一个绿色的按钮：

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

次佳解决方法

最简单的方法是将一个类添加到你的按钮 (不同的颜色)，然后有一些 css 覆盖 jquery-ui css 。

例

var $button = $(document.createElement('a'));
//add class
$button.addClass('redButton');
//call the jquery-ui button function
$button.button();

CSS

.ui-button.redButton {
    background-color: red;
}
.ui-button.greenButton {
    background-color: green;
}

第三种解决方法

尝试这个：

HTML：

<button type="button" id="change_color"> change button </button>

jQuery 的：

$("#change_color").css("background","green");

参考文献

• Changing color of jQuery UI Buttons

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。