更改 jQuery UI 按钮大小？答案

【问题标题】：Changing jQuery UI Button size?更改 jQuery UI 按钮大小？
【发布时间】：2011-03-23 18:36:06
【问题描述】：

我一直在整个页面上使用 jQuery UI 按钮，但是我还没有找到解决这个看似简单的问题的方法。我希望我的一些按钮比另一个小，这应该就像将按钮文本的 CSS 设置为 font: .8em; 这样简单，但是 jQuery UI 会获取您的 DOM 元素并包装它：

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

所以如果我有一个<button class="small-button">Small button!</button>，jQuery 会将文本放在一个子跨度中。为small-button 类指定的任何字体大小都将被忽略。

必须有一种方法来解决这个问题，而无需破解 jQuery 制作按钮的方式。有什么想法吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-button

【解决方案1】：

<input type="submit" value="Mostrar imágenes">

还有我的 CSS：

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }

【讨论】：

【解决方案2】：

我这样做了，效果很好。

$( "button" ).button("font-size", "0.8em");

【讨论】：

我认为这行不通。我用 jQuery 1.11.2 尝试过，但失败了。这应该是正确的方法： $( "button" ).button().css( "font-size", "0.8em" ) ;

【解决方案3】：

在运行时使用 jQuery，无需修改 CSS。这为您提供了更大的灵活性。

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});

【讨论】：

【解决方案4】：

我的解决方案也需要在新菜单项中工作

第一个为菜单和按钮选择匹配元素

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

第二个如上强制继承

.ui-button-text {
 font-size: inherit !important;
}

【讨论】：

【解决方案5】：

这是我在我的网站中使用的设置字体大小的方法，以便我的按钮大小与jQuery UI website 上的相同。这是可行的，因为这正是 jQuery UI website 的做法！

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

通过为 body 元素设置 font-size 属性，为其他所有元素设置 font-size 变得微不足道，因为 100% = 10px。

注意使用百分比时的级联效果 - 子元素的 100% 将等于父元素的字体大小。

【讨论】：

【解决方案6】：

我结合了上述两个建议。按照我喜欢的方式调整 UI 非常容易。

到页面的样式表添加：

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}

【讨论】：

【解决方案7】：

您可以按照 Tim 的建议，通过修改 jQuery 生成的标记中包含的 span 元素的填充来创建不同大小的按钮。

这个标记/JavaScript...

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

在这个转换后的标记中产生结果...

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>

其中肯定包括最初提供的id 和class 标签。您可以通过向 span.ui-button-text 元素添加更多填充来修改按钮的大小。

像这样..

button#some-id .ui-button-text {
    /* padding values here to your liking */
}

【讨论】：

【解决方案8】：

只需更改按钮的字体大小；）。

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />

现在向按钮添加一个 jquery 脚本

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input:submit, #btn2').button();
        });
    </script>

祝你好运。 ;)

【讨论】：

当使用元素的唯一 ID 时，input:submit 选择器只是不必要的开销..

【解决方案9】：

这有助于我降低按钮的高度（Smoothness 主题默认为 1.4 的行高）：

.ui-button .ui-button-text
{
 line-height: 1.0;
}

【讨论】：

【解决方案10】：

如果直接使用font-size 设置ui-button-text 的样式，您可以通过应用!important 在更高级别覆盖它。如：

.small-button {
   font-size: .8em !important;
}

编辑：尝试直接在.ui-button-text 上设置 CSS 样式以继承：

.ui-button-text {
   font-size: inherit !important;
}

这也应该使 .small-button 上的 !important 无关紧要。

【讨论】：

不幸的是，这不起作用。小按钮类挂在按钮元素上，不会覆盖内部跨度。
看看我的编辑，这可能会帮助你。看到您的完整示例（应用了所有 CSS）将是有益的。我将收集到您可能正在为按钮使用 jQuery UI CSS 文件，这可以通过直接修改该 CSS 来满足您的需求来解决。