JQuery - 如何改变按钮的字体粗细而不改变大小

Question

当我改变一个按钮的字体粗细时，大小也会改变。我的问题是我无法给按钮一个预定义的大小，所以我尝试用 .css('width','-=4px'); 来解决它。

但这并不起作用。希望有人能帮助我。

HTML

<input id="b1" type="button" value="Hello world" />
<input id="b2" type="button" value="Blubba blib" />
<input id="b3" type="button" value="Bl" />
<input id="b4" type="button" value="Blubba 55" />

JS

$('input:button').click(function() {

  $('*').css('font-weight','normal');  
  $(this).css('font-weight','bold');    
  $(this).css('width','-=4px');      

});

例子 http://www.jsfiddle.net/V9Euk/618/

先行致谢！
彼得

- Peter

Answer 1

在使用此代码之前，您需要为按钮添加一些填充，以便当其内部的文本扩展时，它们不会溢出。该代码使用.outerWidth来获取正确的宽度并相应地调整按钮。

$('input:button').click(function() {
    var w = $(this).outerWidth();

    $(this).css({
        'font-weight': 'bold',
        'width': w
    }).siblings().css({
        'width': 'auto',
        'font-weight': 'normal'
    });
});

请参见：http://www.jsfiddle.net/CegfY/2。

- Yi Jiang

Answer 2

编辑：

在加粗之前添加一些额外的宽度。

$('input:button').width(function(){
    return $(this).outerWidth() + 20;
}).click(function() {
    $(this).css('font-weight', 'bold').siblings().css('font-weight', 'normal');
});

这是链接

就是这样。

- Stefanvds

---

嗨，Stefanvds，你的解决方案不起作用 :( -> http://www.jsfiddle.net/V9Euk/626/ - Peter

我看到你的做法了 - 但不是额外的宽度让它们保持大小 - 而是因为你给它们分配了固定的宽度。如果你去掉 +20px，它仍然可以正常工作。这基本上是我的解决方案，但更好（虽然不太灵活，如果你想动态改变按钮的内容），所以加一分。我也正在更新你的解决方案，使其更有效率，希望你不介意。 - Yi Jiang

Answer 3

我了解您的问题

您可以找到按钮的宽度并像下面一样减小该按钮的宽度。

            $('*').css('font-weight', 'normal');
            $(this).css('font-weight', 'bold');
            var wdth = $(this).width();
            wdth = wdth - 4;
            $(this).css({ width: wdth+'px' });

当你点击该按钮时，它会找出按钮的宽度并减小宽度。

最终，你可以检查字体粗细属性并根据需求交替减少或增加。

此外，你可以使用大小百分比来实现。

- Umakanta.Swain

Answer 4

你应该从一开始就尝试为按钮设置更大的尺寸，这样当文本加粗时尺寸不会改变。

- GôTô

---

你能给我一个 jsfiddle 的例子吗？ - Peter