jquery ui按钮填充覆盖

Question

HTML 标记如下:

<button id="Refresh"><img src="refresh.png" /></button>

我使用以下代码将此按钮创建为 jquery ui 按钮:

$("#Refresh").button();

调用此函数会产生以下标记:

<button id="Refresh" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
    <span class="ui-button-text">
        <img src="refresh.png">
    </span>
</button>

这很好用。结果是一个具有 .4em 1em; 填充的按钮，如 jquery 的 CSS 中所定义。 (.ui-button-text-only .ui-button-text)

此页面上有几个按钮，我喜欢其中大多数按钮的填充。然而，特别是对于这个按钮，我希望没有填充。我意识到我可以更改 .ui-button-text-only 和 .ui-button-text 的 CSS，但这会搞砸使用这种样式的其他按钮，我喜欢他们本来的样子。

所以我想知道是否有任何方法可以仅针对一个按钮覆盖此 css。我看了一下jquery's button docs但它似乎不允许通过按钮选项传递特定的 CSS。

预先感谢您的帮助!

Answer 1

创建按钮后，您只需将新类添加到按钮内的范围即可。

$("#Refresh").button();
$("#Refresh").find('span.ui-button-text').addClass('yourClass');